我目前正在尝试自定义在http://nvd3.com/ghpages/lineWithFocus.html上找到的时间序列图表示例.这是使用nvd3实现的，nvd3是d3之上的一个库。我希望在顶部图表中获得数据点的工具提示，但也希望能够在相同图表中选择一个范围，就像在示例中底部的“取景器”图表中一样。p>为此，我在基本折线图的示例中添加了“画笔”(请参阅​​http://nvd3.com/ghpages/line.html)。范围选择就像一个魅力，但是，数据点的工具提示不再起作用，除了刚好超出轴范围的点。看起来，位于画笔区域的数据点不再获得鼠标事件，画笔将它们全部吸收。线条的数据点接收

我正在尝试使用来自csv的数据使用d3绘制热图:这是我目前所拥有的给定一个csv文件:row,col,score0,0,0.50,1,0.71,0,0.21,1,0.4我有一个svg和代码如下:d3.csv("sgadata.csv",function(data){data.forEach(function(d){d.score=+d.score;d.row=+d.row;d.col=+d.col;});//heightofeachrowintheheatmap//widthofeachcolumnintheheatmapvarh=gridSize;varw=gridSize;varr

说实话；当Angular将this绑定(bind)到类(组件/服务)时，如何处理引用D3对象的this？我希望在Angular(v.4)应用程序中使用D3.js(v.4)。我的代码在独立的JavaScript中运行，但我现在需要将它集成到Angular应用中。this的使用让我感到困惑。我有一个我想拖动的SVG组，所以我使用.call(drag)someFunction(){this.unitGroup=this.svg.append('g').attr('id','unitGroup');.call(drag)}当我尝试引用正在拖动的svg元素时，我的问题就出现了。在我的原始代码中，

我正在尝试根据http://mbostock.github.com/d3/talk/20111116/bar-hierarchy.html制作图表，唯一的区别是我想对x轴使用对数刻度。这是我的fiddle:http://jsfiddle.net/JhDVC/5/如您所见，x轴在第4行定义:x=d3.scale.linear().range([0,w]),如果我改变它x=d3.scale.log().range([0,w]),然后它不起作用(没有呈现任何内容)，抛出这些错误消息:Error:Invalidvalueforattributewidth="NaN"更改域设置从x.domain

我用d3.js定义了一个线生成器，如下所示:varline=d3.svg.line().interpolate("monotone").x(function(d){returnx(d.date);}).y(function(d){returny0(d.visits);});数据是从具有以下格式的csv中读取的:date,visits12/08/12,113/08/12,014/08/12,015/08/12,3316/08/12,28csv文件被载入data，解析为:data.forEach(function(d){d.date=d3.time.format("%d/%m/%y").p

尽管我无数次通读了D3API，但我仍在努力理解D3中的合并功能。API说:“此方法通常用于合并数据连接后的输入和更新选择。在分别修改输入和更新元素后，您可以合并两个选择并对两者执行操作，而无需重复代码。"这是一个在力导向图表中假定直接使用它的示例，其中每次报价都会调用已报价的函数:varsimulation=d3.forceSimulation(nodes).force("charge",chargeForce).force("center",centerForce).on("tick",ticked);functionticked(){varu=d3.select("svg").se

我正在尝试将扩展名为“.svg”的svg图像添加到我的图表(另一个使用d3创建的svg图像)。这是代码:d3.select("#chart1svg").append("svg:image").attr("xlink:href","img/icons/sun.svg").attr("width",40).attr("height",40).attr("x",228).attr("y",53);如您所见，我正在设置“xlink:href”属性，但d3在浏览器中将其更改为href:事实上，如果我使用png扩展，这段代码可以完美运行。有什么想法吗？ 最佳答案

谁知道有什么区别？我的理解是两者都会返回相同的选择。但是，当我进行追加时，如果我使用selectAll("p")它不起作用。例如，这个有效:varfoo=d3.select("body").selectAll("p").data([1,2,3,4]);foo.enter.append("p")虽然这不起作用:varfoo=d3.selectAll("p").data([1,2,3,4]);foo.enter.append("p")为什么后者不起作用？ 最佳答案 这里的简短回答是，“因为没有什么可以追加的。”虽然您是正确的，d3.se

所以我有一个图表绘制流量与日期和费率与日期。我试图遮蔽两条线之间的区域。但是，我想根据哪条线更高将它着色为不同的颜色。以下工作没有最后一个要求:vararea=d3.svg.area().x0(function(d){returnx(d3.time.format("%m/%d/%Y").parse(d.original.date));}).x1(function(d){returnx(d3.time.format("%m/%d/%Y").parse(d.original.date));}).y0(function(d){returny(parseInt(d.original.traff

这是一个JSFiddle:http://jsfiddle.net/8p2yc/(此处稍作修改的示例:http://bl.ocks.org/mbostock/3883245)正如您在JSFiddle中看到的，沿y轴的刻度标签不适合svg。我知道我可以增加左边距，但问题是我事先不知道数据是什么。如果我只是将页边距设置得非常大，如果数字的长度很短，图表就会显得很尴尬。有没有办法在创建图表时预先计算最大标签宽度以正确设置边距？或者也许有一个完全不同的解决方案？varmargin={top:20,right:20,bottom:30,left:50},width=400-margin.left-