Question

我有一个d3图表，显示两行显示一个国家/地区的进口和出口。它工作正常，并使用'Developing a D3.js Edge'中描述的模块化样式，这样我就可以很容易地在同一页面上绘制多个图表。

但是，我现在想传递两个国家/地区的数据并为它们绘制导入和导出行。经过一天的实验，并且越来越接近使它工作，我无法弄清楚如何用我所拥有的东西做到这一点。我以前用d3成功绘制了多线图，但是无法从这里看到如何到达那里。

您可以在此处查看我的内容：http://bl.ocks.org/philgyford/af4933f298301df47854（或gist）

我意识到有很多代码。我标有＆＃34;你好＆＃34; script.js中绘制线条的点。我不知道如何为每个国家绘制一次这些线条，而不仅仅是第一个，这就是它现在正在做的事情。

我猜测我申请data()的地方对于这种用法并不正确，但我很难过。

更新：我在jsfiddle上添加了一个更简单的版本：http://jsfiddle.net/philgyford/RCgaL/

Answer 1

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

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结构镜像 - 每个g.lines对应一个键值对和每个到值列表的路径。

完整演示here。

Answer 2

关键是你正在考虑当务之急。这就是你有这么多代码的原因。我真的不能比迈克博斯托克更好，你必须开始Thinking with Joins：

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

但这只是一个圆圈，你需要很多圈子：每个数据点一个圈子。在你淘汰for循环并暴力破解它之前，请考虑D3的一个例子中的这个神秘序列。

这里的数据是具有x和y属性的JSON对象数组，例如：[{“x”：1.0，“y”：1.1}，{“x”：2.0，“y”：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);

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

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

2 个答案:

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

2 个答案:

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