我有一个 d3 图表,其中显示两条线,显示一个国家/地区随时间的 import/export 情况。它工作正常,并使用'Developing a D3.js Edge'中描述的模块化风格。这样我就可以很容易地在同一页面上绘制多个图表。
但是,我现在想要传递两个国家的数据并绘制这两个国家的进口和导出线。经过一天的实验,并且越来越接近使其发挥作用,我不知道如何用我所拥有的来做到这一点。我之前已经用 d3 成功绘制了多线图表,但不知道如何从这里到达那里。
您可以在这里查看我的内容:http://bl.ocks.org/philgyford/af4933f298301df47854 (或gist)
我意识到有很多代码。我在 script.js 中标记了绘制线条的点“Hello”。我不知道如何为每个国家绘制一次这些线,而不是只为第一个国家绘制一条线,这就是它现在正在做的事情。
我猜测我应用data()
的地方对于这种用法来说是不正确的,但我被难住了。
更新:我在 jsfiddle 上放置了一个更简单的版本:http://jsfiddle.net/philgyford/RCgaL/
最佳答案
实现你想要的关键是 nested selections 。首先将整个数据绑定(bind)到 SVG 元素,然后为数据中的每个组(每个国家/地区)添加一个组,最后从绑定(bind)到该组的数据中获取每行的值。在代码中,它看起来像这样(我在这里简化了实际代码):
var svg = d3.select(this)
.selectAll('svg')
.data([data]);
var g = svg.enter().append('svg').append('g');
var inner = g.selectAll("g.lines").data(function(d) { return d; });
inner.enter().append("g").attr("class", "lines");
inner.selectAll("path.line.imports").data(function(d) { return [d.values]; })
.enter().append("path").attr('class', 'line imports')
.attr("d", function(d) { return imports_line(d); });
由此生成的结构类似于 svg > g > g.lines > path.line.imports
。我在这里省略了导出行的代码——它也位于 g.lines
下面。您的数据由一系列键值对组成,其中一个列表作为值。这由 SVG 结构反射(reflect) - 每个 g.lines
对应一个键值对和值列表的每个路径。
完整演示 here .
关于javascript - 在 d3.js 图表上绘制多组多条线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23388549/