我正在尝试使用和理解(http://mbostock.github.com/d3/)，我在看，他们似乎在用四叉树来计算粒子上的力。代码是 var k = kc * quad.count * dn * dn; node.px -= dx * k; node.py -= dy * k; 其中，似乎thay quad.count是四叉树节点中的粒子数。但是查看他们的输入，我找不到任何关于计数的参考，也找不到它是如何计算的。我这样问是因为我想修改一些东西，也许可以更
有没有一种简单的方法可以将第二个Y轴添加到图表模型中？我看到图表具有此功能（通过y1Axisy2Axis和forceY），但是否有简单的方法将其添加到其他型号？我想将其用于线形图或散点模型。相同的X轴，不同的Y值需要双Y轴。你可以试试这个： plot(x,y1......,axes=F) axis(2,....) # build the left Y axis par(new=T) # means that the next chart will be draw on the picture y
svg路径是使用class=“domain”创建的。我假设下面的代码会处理这个问题： yAxis = d3.svg.axis().scale(y).orient("left").tickFormat(d3.format(".2s")).ticks(20).tickSize(width); svg.append("g") .attr("class", "y axis") .attr("transform", "translate(" + width + ", 0)") .c
我正在尝试用D3和TopoJSON为荷兰绘制地图，包括各省。 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>D3 Test</title> <script type="text/javascript" src="http://localhost/webserver/d3/d3.js"
我正在尝试使用d3.js实现水平条形图。一些图表标签太长。 如何对y AIX上的图表标签进行换行 源代码： var data = [{"Name": "Label 1", "Count": "428275" }, { "Name": "Label 2", "Count": "365005" }, { "Name": "Label 3", "Count": "327619" }]; var m = [30, 10, 10, 310], w = 1000 - m[1] - m[3], h = 55
以下是所有代码，简而言之，您只需将其保存为HTML文件并试用即可： 看一开始，我假设散点图圆圈的默认数字，我完全画出了散点图 var numDataPoints = 50; 然后在底部，我有一个监听器，它用随机的新值重新绘制散点图，它可以工作。但是我想改进它，这样我可以在文本框中键入要绘制的圆数，它应该绘制那么多的圆，而不总是它开始时的50个圆。但它不听我的！是的，它确实用新的随机值重新绘制了圆，但它仍然绘制了与最初相同数量的圆。我不知道如何修复这个部分，我对D3.js还很陌生。我期望它工作
关于绘制值之间间距不相等的轴的任何建议。例如，我当前正在使用以下工具绘制轴： yScale = d3.scale.linear().domain([0, 60000]).range([height, 0]) 在0和5000之间需要更多的间距，而不是平均分布所有数据点尝试使用： 范围（0，5000）和（5000，60000）将被赋予相同的空间量。谢谢您的建议 yScale = d3.scale.linear().domain([0, 5000, 60000]).range([height, he
我正在尝试使用D3（和topojson）制作干旱地图，使用 我已经将其转换为GeoJSON和topojson，但无论哪种情况，尝试渲染都会导致浏览器挂起，并且该选项卡的CPU达到100%或更高 我可以渲染更大的文件，就像所有文件一样，我可以使用Mapnik或TileMill渲染文件。但在浏览器中，它会消失 我明白了。如图所示，“文件已投影到美国相邻的Albers等面积圆锥投影。” 事实证明，这是一个问题，尽管我并不完全理解。我使用ogr2ogr将其转换为EPSG:4326： $ ogr2ogr
基于我找到的所有优秀示例，使用D3地理正交投影构建交互式地球仪，玩得很开心 你可以在网站上看到我的简单模型 我希望用户像操纵轨迹球一样操纵地球仪（）。我从Mike的一个例子（）开始，稍作改进，使用画布坐标并在“轨迹球坐标”（即围绕画布水平轴和垂直轴旋转）中表示鼠标位置，这样固定的鼠标移动可以在地球边缘附近提供更多旋转（如果您使用上面解释的hyberbolic扩展，那么它可以在地球之外工作），而不是Mike的一对一通信 当地球仪从一个未旋转的位置（北极垂直）开始，但当地球仪已经旋转时（操纵示例，使
我正在尝试将“us.json”TopoJSON文件中的县合并到各自的农业区。我遵循了这里的“合并状态II”代码：它按预期工作。唯一的问题是，由于正在进行的所有处理，在浏览器中加载需要10-15秒 我必须相信有一种更有效的方法来完成这项任务；甚至可以使用TopoJSON提前合并多边形，但我对该程序不太熟悉，因此不知道如何继续 html和JSON查找文件可以在下面的GitHub中找到 非常感谢您的任何意见或建议。谢谢您的评论。我能够从ArcGIS导出三个不同的shapefile层，然后将它们放入其
我一直在玩将现有网站/应用程序包装成chrome打包应用程序的游戏 它是一个d3.js应用程序，通过d3.csv、d3.json等异步加载数据文件 d3代码似乎在做一些打包应用程序（不可修改？）CSP不允许的事情。我想我正在使用的其他一些库也可以这样做。因此，你必须“沙箱”页面/应用程序，以允许这一点。但是，这意味着您不能进行异步调用来获取数据文件。您也不能同步进行jquery异步调用 除了对chrome应用程序进行一些特定的更改之外，我没有看到任何其他解决方案，比如用javascript方法包
我试图显示一个基于时间的d3面积图。在这张图的开头有一个非常奇怪的“尾巴”，我不确定是什么导致了这个问题 这是JSFIDLE 我将日期转换为正确的格式，但我想知道是否因为数据不是按datetime值排序而出现问题 data.forEach(function (d) { var newDate = new Date(d.daterun/1000000); d.daterun = newDate; d.intvalue = +d
我已经构建了一个d3 js代码，用下面的d3.js代码在时间轴上绘制一个笔刷，我想做的是在拖动笔刷时更改d3.time.scale的域 <!DOCTYPE html> <html > <head> <title>Visualization of Room</title> <meta charset="utf-8"> <script src="http://d3js.
我正在尝试向此添加缩放行为 我创造了这样的行为： zoomed = -> svgContainer.select(".x.axis").call xAxis svgContainer.select(".y.axis").call yAxis svgContainer.select(".line.matched_peak").attr("d", msBars); zoom = d3.behavior.zoom() .x(xScale)
是否有一种标准的方式来读取和解析javascript中的点图文件，理想的方式是在d3中很好地工作 目前，我唯一能想到做的就是阅读纯文本并进行自己的解析。希望这将是重新发明车轮虽然 d3.text("graph.dot", function(error, dotGraph) { .... )}; 要获得用Javascript呈现的Graphviz点文件，请结合和库 graphlibDot.read方法采用点语法中的图形或有向图定义，并生成图形对象。然后，dagreD3.render方法可
我在d3.js中有以下代码 var svg = d3.select(".Canvas").append("svg").attr( "width", width + margin.left + margin.right).attr("height", height + margin.top + margin.bottom).append("g").attr( "transform", "translat
给定一个形状文件： 天然土/ 考虑到我们想要为D3js数据重新编程，也就是说，我们可以在不同的级别重新编程 1。使用ogr2ogr获取重新投影的shapefile（）： ogr2ogr -f 'ESRI Shapefile' -t_srs 'EPSG:...' output.shp input.shp 或者2。使用（npm）topojson.js获取重新投影的topojson（）： topojson \ -o output.topo.json --project
这是一段代码，我可以在其中正确获取数据。但问题是我无法绘制图表 请参考此链接以查找我获得的图表图像 // This is where the composite chart code is starting. CompositeChart: function (chartConfig, chartManager, meta) { var data = meta.data; var panelDetails = this.panelDetails(chartConfig.char
在本例中，我尝试使用d3向线形图添加点： 我也试着跟着 如何从文档中获得与此图片类似的点？ 圆圈的笔划应与线条颜色相匹配 var color = d3.scale.category10(); var rank = svg.selectAll(".rank") .data(ranks) .enter().append("g") .attr("class", "rank"); rank.append("path") .attr("cl
我在大学里做了一个关于可视化的小项目。我们选择了D3.js。他们提供了关于每个国家的数据和其他详细信息，这些数据需要创建可视化，但不能使用地图，并且必须找到2-3个其他可视化想法，用国家及其详细信息的过滤器来表示这些数据 我已经决定了这样一种方式 只是寻求一些特别普通或独特的视觉效果 提前感谢这是我见过的最好的d3示例列表。它还有每个例子的代码 在d3上有一些非常好的库可以使用，它们可以让事情变得非常简单，并且可以获得一些额外的动画，而无需自己构建。我非常喜欢Dimple.js和NVD3.js。
这里的和弦以一种奇怪的方式相交。是否有需要调整的变量 和弦是怎么画的？我在文档和示例中看到的唯一变量似乎只指定了绘制弦的基本变量，例如从x角度到y角度。我也尝试过添加插值，类似于调整常规svg行的方式，但这不起作用 问题位于的第15行。通常，当线段之间的角度较小时，您要做的是使用更好的控制点。我不知道这是一个什么样的好猜测，但我知道代码会去哪里 第51-53行计算和弦的路径。（0,0）是一个“控制点”（请参阅）。当开始角和结束角彼此非常接近时，控制点倾向于将路径拉向图表中心（原点）太远。因此，为
我试图根据多年来来自几个国家的几类数据创建线条+散点图 问题是直线图从一个数据类别延续到下一个数据类别。 我查看了来自的exmaple，但不太了解需要实现哪些更改 我应该使用元素分离数据吗？或者，有没有更简单的方法 var line = d3.svg.line() .x(function(d) {return xScale(d.Year); }) .y(function(d){ return
我正在生成动态上下文菜单，当用户右键单击某个形状时会显示该菜单。我已经成功地创建了上下文菜单，但是当用户从菜单中选择一个条目时，我很难捕捉到单击事件 事件保持绑定到右键单击操作以创建上下文菜单，而不是左键单击菜单本身中的列表项 我已经挖了这么多东西，没能找到什么东西让我走完剩下的路 我希望在本例中，当用户单击列表元素并传递所单击项目的名称时触发console.log函数。在一个完美的世界里，它不会在最初的右键点击时触发，但我会得到我能得到的 <!DOCTYPE html> <h
是否可以使用n3折线图在图表上隐藏X轴和Y轴？我想离开这里 对此 我看了一眼，但没有找到答案。我试图不指定轴，但它们仍然可见。希望有人能帮助我。您需要将addmode=“thumbnail”属性设置为元素。尝试使用CSS管理，使用.x.axis{display:none；}和y轴.y.axis{display:none；}任何本机构造？无论如何，它是有效的，你可以把这个评论作为答案
当我在下面的示例中看到传递给步骤3的数据绑定函数的索引值时，我有点惊讶： 1） 创建两个包装器div，每个包装器div绑定一个数据数组 2） 在每个包装器中创建两个“sub div”，每个包装器绑定一个数组 3） 将p元素附加到每个“子div” 由于元素的嵌套方式，我希望在步骤3中看到0,1的索引传递给数据绑定函数。相反，我看到的索引是0,1,2,3 var data=d3.选择（“数据”）； var idx=d3.选择（“索引”）； //----第一步 //创建两个绑定了[1,4]和[7,1
我需要用彩虹的颜色创造传奇，比如？ 但我不知道怎么做。有什么想法吗 UPD：不幸的是，我对这项任务的理解很差。我不需要只带颜色的条纹。我需要一个对象来创建图例并应用它来填充SVG元素。这里是一个快速的d3实现： 风险值数据=[{ 颜色：'白色'， 标签：“雪” }, { 颜色：“红色”， 标签：“摇滚乐” }, { 颜色：'紫色'， 标签：“松树” }, { 颜色：“蓝色”， 标签：“玄武岩” }, { 颜色：“浅蓝色”， 标签：“狗” }, { 颜色：“绿色”， 标签：“猫” }, { 颜色
我想用d3.js进行数据可视化。 我想知道是否有可能做这样一个 数据如下所示：A（实际数字）：25%，B（目标数字）：32%是！您可以使用d3饼图布局如下： 我假设您有一个数据集，如您在问题中所解释的： data = [{ "label": "Actual", "percent": 25 }, { "label": "Target", "percent": 75 }] var-width=960， 高度=500， 半径=数学最小值（宽度、高度）
我正在尝试使用D3.js绘制一个折线图。问题在于，对于某些股票符号，图表是正确的，而对于某些股票符号，图表是错误的。 我附上了两张图片。一个显示的是一个折线图，该折线图显示的是某一特定股票的错误图形。另一个显示的是另一个股票的正确图形。 查看svg中路径标记的d属性（在我附加的图像中）。d属性的值与错误图形的图表相差很远。我显示的两个图形是从同一个程序生成的 您的电子秤已关闭。如果你看错了图表上的轴，数字的范围很窄，显然超出了高点和低点。检查为y比例定义域的代码
我有一大堆数以百万计的数字。我想在d3条形图的标签中使用它们，格式类似于$2300万——但出于某种原因，我的小数一直保留着 我读到的是，$，.0f应该有效，如果我先除以1000000 我有var百万=d3.format（“^$，.f”）然后我稍后用 .text(function(d) { return (millions(d.money / 1000000) + "M"); }) 我仍然看到小数点后的数字。我做错了什么 我发现了一个可以在你给它的任何数字上演示各种格式字符串的程序，当我
目前在d3中，如果你要绘制一个geoJSON对象，你必须缩放并转换它，以使其达到你想要的大小，并转换它以使其居中。这是一项非常繁琐的反复试验的任务，我想知道是否有人知道获得这些值的更好方法 例如，如果我有这个代码 var path, vis, xy; xy = d3.geo.mercator().scale(8500).translate([0, -1200]); path = d3.geo.path().projection(xy); vis = d3.select("#vis").app
我按照下面提到的链接创建d3包布局。我想改变的是在每个包装布局中得到固定大小的圆圈 我在下面的链接中找到了解决方案，但据我所知，这段代码是针对d3.v3.js的 有人能帮我吗？我怎样才能达到相同的尺寸，而不是它的实际“d值”。提前感谢。只需使用以下设置您想要的大小： 如果指定了radius，则将包布局的radius访问器设置为指定函数并返回此包布局 因此，可以简单地说： pack.radius(() => someNumber) //your value here-----^ 这是您与
我想加载带有cdn的微库。 ・是否有在某个地方正常工作的示例代码 ▼index.html <script src="https://d3js.org/d3-scale.v1.js"></script> 错误 未捕获类型错误：d3Color.cubehelix不是函数 这一点非常清楚：如果你想引用微库来使用d3.scale，你必须引用所有这些： <script src="https://d3js.org/d3-array.v1.min.js"></sc
使用d3.js，我想制作一个图表，以饼图的形式显示每个项目，显示不同节目的季度门票销售情况 这是我想制作的图表的示例图片，图表中的每个部分代表一个节目的门票及其在每个季度的销售百分比。现在使用此链接 我已经制作了一个图表，但它并不是我所需要的。d3.js中是否有任何图表可以显示我在图片中提到的图表，或者我们需要对其进行自定义以获得类似的图表 d3.js中是否有我提到的图表 在图片中，还是我们需要自定义它以获得这样的图形 不，没有现成的解决方案，d3因为问题注释上的是一组用于操作DOM的方法，这
我想做一个类似下图的图表，画一条线到一个点，这个点随着时间的推移而增加。底部的数字是秒（通过的次数） 我想用D3.js实现它，但我真的不知道如何实现它 我开始看d3 zoom的侧面。但我不明白我如何才能制造出一条动态增长的生产线。你看到过类似的例子吗？谢谢我想可能会有帮助。只需增加转换的持续时间，即可获得与示例类似的效果 function transition(path) { path.transition() .duration(10000) .att
如何使用d3.js更改嵌套的svg的轴心点 我尝试使用文本锚定和对齐基线，但它不适用于svg（而适用于文本） 调试器； var svg=d3。选择（“绘图区域”） .append（“svg”） .attr（“宽度”、“100%”） .attr（“高度”、“100%”）； svg.append（“rect”） .attr（“x”、“0”） .attr（“y”、“0”） .attr（“宽度”、“100%”） .attr（“高度”、“100%”） .attr（“填充”、“黄色”）； const bu
我的数据集类似于 我用复合折线图来表示这些数据 我正在使用selectMenu筛选“BW”和“NS”记录。但当我使用selectmenu时，复合图表保持不变 我将数据拆分为两个单独的文件（一个带有“BW”记录，另一个带有“NS”记录），以尝试实现中提供的数据选择功能。那也不行 最后，我想通过带或不带选择菜单的“BW”和“NS”记录过滤多个图表（复合、系列和气泡） 我如何实现这一点 问题不在于选择菜单或合成图表，而在于减少数据的方式 第一个参数是add函数，第二个参数是remove函数，最后一个
我想创建一个圆形裁剪图像，与svg圆形一起使用，并决定用一个模式填充svg圆形。我让它为单个案例工作： defs.append("svg:pattern") .attr("id", "story1") .attr("width", 200) .attr("height", 100) .attr("patternUnits", "userSpaceOnUse") .append("svg:image") .attr("xlink:href", 'ml
我正在制作一个交互式折线图，从复杂的数据结构中捕获数据时遇到了问题 我传递了一组路径，它可以工作： path = [[{x:int,y:int},{x:int,y:int},{x:int,y:int}], [{x:int,y:int},{x:int,y:int},{x:int,y:int}], [{x:int,y:int},{x:int,y:int},{x:int,y:int}]] 但这是我正在使用的数据结构： data:[{ id: 0,
因此，我想创建一个问题流程图，如下所示： 不确定从哪里开始最好是。。。这是有向图吗？ 其中一些最终被真正隔开，看起来不适合这样的“流”： 我见过的最好的例子是一个非D3库（yworks），但它似乎要花费1.5万美元： 这是我见过的唯一一个与StackOverflow相关的引用了yworks： 也许这也是dagre-d3的例子： 我想添加一些很酷的可选内容： *我还希望能够控制圆圈上的css，比如在某些情况下，基于该节点的数据，一些圆圈会变绿一些变红 *我还想添加的每个边箭头都会悬停事件，因此会
我正在开发一个d3js甘特图——我想增强这个图表代码，这样它就可以在顶部合并一个日期/时间刻度，在视图中变形——还可以添加一条蓝线，指示当前日期/时间（移动-实时？）。我认为车道高度也不正确——调整车道高度有点困难——如果在未来的设计中需要，可以添加排水沟。洗涤器区域可能有冗余网格线 //当前设计 //新概念 //最新版本 //html <html lang="en"> <head> <meta charset="UTF-8"/> <met
所有矩形都正确定位。但我试图在矩形中显示计数。我尝试了很多方法，但都不管用。我尝试将矩形和文本标记按组标记分组。我得到了文本，但有些数据没有到达文本标记。我提供了一个链接供参考[在此热图中仅显示带矩形的热图][1]。我得到了很多解决方案，但没有为我的代码工作 <!DOCTYPE html> <meta charset="utf-8"> <style> #calendar { margin: 20px; } .month { margin-right:
如何在秒、分钟、小时、天、月和年上创建时间刻度。在我的代码中，当秒重叠时，我会得到第二行 //设置图形的尺寸和边距 var margin={顶部：20，右侧：20，底部：30，左侧：50}， 宽度=600-边距。左侧-边距。右侧， 高度=500-margin.top-margin.bottom； //解析日期/时间 var parseTime=d3。时间分析%Y-%m-%dT%H:%m:%S； //设定范围 var x=d3.scaleTime.range[0，宽度]； 变量y=d3.刻度线范
是否可以按链接中的值筛选相关链接和节点 例如，筛选节点和链接，其中filter_columns=12 "links": [ { "source": "13600", "target": "4112", "filter_column": 12 }, { "source":
我试图制作一个热图，其中x和y单元格值可以保持不变，但“填充”属性可以根据数据进行更改。我试着这样做： var tiles = svg.selectAll('rect') .data(data.values, function(d) {return d.mt_aa+':'+d.position_aa;}) // set up the enter/update/exit block tiles.join( function(enter) {
Daily Kos有一个独特的“国会选区Hexmap-CDs-国会选区（50个州）”形状文件，非常适合我们的用例。但我遇到了一个问题，那就是如何将它与我们设计的容器大小相匹配。传统上，我使用TopoJSON文件，即美国各州，使用Albers USA投影（或其他投影）进行投影，然后使用容器宽度和高度来计算形状的最佳路径（见下文） 在这个“国会选区Hexmap”案例中，我相信shapefile已经被投影，因此当我应用Albers或Mercator投影时，它会扭曲其外观和感觉 因此，我想知道是否有nu
我试图为scaleLog（）.base（2）生成刻度。 看起来，它工作不正常。 例如，对于呼叫： d3.scaleLog().base(2).domain([50,500]).ticks(10) 我得到： [ 50, 100, 150, 200, 250, 300, 350, 400, 450, 500 ] 它只是线性放置的滴答声。对于底座（10），其工作正常 d3.scaleLog().base(10).domain([50,500]).ticks(10) [ 50, 60, 70, 80
我创建了一个简单的d3js垂直条形图。我知道，通常，要创建网格线，我会使用“tickSize”调用，并给它们一个类似于轴的高度或宽度 var yGridLine = d3.svg.axis() .scale(yScale) .tickSize(-width, 0 ,0) .tickFormat("") .orient("left"); 上面的代码将创建水平网格线。因此，如果我想创建垂直网格线，那么我将修改方向和参考轴（类似于下面未测试但假
缩小面积和规模。在更新面积和比例时，您可以在一些过渡中完成一些操作，这只是一个小小的眼花缭乱。 function zoomed(event) { var xz = event.transform.rescaleX(x); var startDate = xz.domain()[0]; var endDate = xz.domain()[1]; var fData = d
（i） 我正在尝试删除y轴末端记号，但在这种情况下，ticksizeout（0）对我没有帮助 （ii）我还希望在y轴末端刻度值（60）之后有一些填充，类似于x轴。我尝试了padding和paddingOuter，但这对我没有帮助 这是你的电话号码 这是我的代码： maxAllowed = 60; graphData = [ { hrCount: 4, resCount: 2 }, { hrCount: 8, resCou
绝对是d3.js的新手 我正在尝试一个教程，从它应该是直接向前，但我正在拔我的头发了 <!DOCTYPE html> <html> <head> <script type="text/javascript" src="https://d3js.org/d3.v6.min.js"></script> </head> <style>