Javascript 在d3.js图表上绘制多组多行

我有一个d3图表，显示了一个国家随时间的进出口情况。它工作得很好，并且使用中描述的模块化样式，因此我可以很容易地在同一页上绘制多个图表

然而，我现在想传递这两个国家的数据，并为这两个国家画出进出口线。经过一天的实验，并且越来越接近使它工作，我不知道如何用我所拥有的做这件事。我以前已经成功地用d3绘制了多折线图，但现在还看不到如何实现

您可以查看我这里的内容：（或）

我意识到有很多代码。我在script.js中用“Hello”标记了画线的点。我不知道如何为每个国家画一条线，而不是只为第一个国家画一条线，这就是它现在正在做的

我猜我应用

data（）

的地方不适合这种用法，但我被难住了

---

更新：我在jsfiddle上放了一个更简单的版本：

重点是您正在考虑使用命令式。这就是为什么你有这么多代码。我真的没有比迈克·博斯托克更好的了，你必须开始：

但这只是一个圆，您需要许多圆：每个数据点一个圆。在你跳出一个循环和蛮力之前，从D3的例子中考虑这个神秘的序列。

这里的数据是具有x和y属性的JSON对象数组，例如：[{“x”：1.0，“y”：1.1}，{“x”：2.0，“y”：2.5}，…]

---

我将把这个例子翻译成“从一行到多行”作为一个例外。

实现目标的关键是。首先将整个数据绑定到SVG元素，然后为数据中的每个组（每个国家）添加一个组，最后从绑定到该组的数据中获取每行的值。在代码中，它看起来是这样的（我在这里简化了真正的代码）：

由此生成的结构类似于

svg>g>g.lines>path.line.imports

。我在这里省略了导出行的代码——也就是

g.lines

。您的数据由一个键值对列表和一个列表作为值组成。SVG结构反映了这一点——每个

g.lines

对应一个键值对和值列表的每个路径

---

完整的演示。

如果您能将其缩小到一个演示问题的最小示例，这将有所帮助。我不知道如何轻松地做到这一点，但您是对的-我会尝试一下。我现在在JSFIDLE上放了一个更简单的版本：您当前的代码似乎被设置为创建多个图表（我已经使用嵌套选择完成了）。这就是你想要的吗？我想要创建几个图表的选项——这似乎是一个有用的功能——但在这种情况下，我只想要一个图表，上面绘制了两组导入/导出数据。谢谢Chris。我确信我的想法是错误的，这就是为什么我一直在与d3抗争这么多周/月的原因！我理解这个示例，但我所采用的模型似乎使用了enter/update/exit思想来创建多个图表，而不是直线。我想不出如何同时使用它。我会继续戳的，非常感谢拉尔斯。我正在努力完全理解这一点，但我继续尝试d3，希望我能一步一步地向前迈进。你的帮助是无价的。在这项工作完成后，我花了很长时间努力解决的一点是如何让这张图表用新数据更新。绘制完图表后，如果传入新的

数据

数组，如何转换到新数据？我尝试了许多基于简单工作示例的变体，但到目前为止。。。没有变化。如果您就此单独提出一个问题，并对问题进行更详细的描述，可能会更好。我现在已经在这里完成了：

svg.append("circle")
    .attr("cx", d.x)
    .attr("cy", d.y)
    .attr("r", 2.5);

svg.selectAll("circle")
    .data(data)
  .enter().append("circle")
    .attr("cx", function(d) { return d.x; })
    .attr("cy", function(d) { return d.y; })
    .attr("r", 2.5);

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); });