javascript - 在 d3.js 图表上绘制多组多条线

Question

我有一个 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/

Answer 1

实现你想要的关键是 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 .