在d3.js图表​​上绘制多组多行 [英] Drawing multiple sets of multiple lines on a d3.js chart

问题描述

我有一个d3图表，显示两行显示一个国家的进口和出口随着时间的推移。它工作正常，并使用'开发D3.js边缘'中描述的模块化样式所以我可以很容易地在同一页上绘制多个图表。

但是，现在我想传递两个国家/地区的数据，进口和出口两条线。经过一天的实验，并接近使其工作，我不知道如何做到这一点，我有。我已经成功地绘制了多行图表与d3之前，但不能看到如何从这里到达。

您可以查看我在这里： http://bl.ocks.org/philgyford/af4933f298301df47854 （或 gist ）

我意识到有很多代码。我在script.js中标记了Hello的点，在这里绘制线条。我不能解决如何为每个国家绘制一次这一行，而不是只针对第一个，这是它现在正在做的。

应用 data（）不正确，
$ b

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

解决方案

实现您想要的关键是嵌套选择。您首先将整个数据绑定到SVG元素，然后为数据（每个国家/地区）中的每个组添加一个组，最后从绑定到组的数据中获取每行的值。在代码中，它看起来像这样（我已经简化了真正的代码在这里）：

  var svg = d3.select ）
 .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 ）.attr（'class'，'line imports'）
 .attr（d，function（d）{return imports_line（d）;}）; 
  

这样生成的结构看起来像 svg> g。 g.lines> path.line.imports 。我在这里省略了导出行的代码，也就是 g.lines 。您的数据由一个列表作为值的键值对列表组成。这是由SVG结构镜像的 - 每个 g.lines 对应一个键值对和值列表的每个路径。

完成演示此处。

I have a d3 chart that displays two lines showing a country's imports and exports over time. It works fine, and uses the modular style described in 'Developing a D3.js Edge' so that I could quite easily draw multiple charts on the same page.

However, I now want to pass in data for two countries and draw imports and exports lines for both of them. After a day of experimentation, and getting closer to making it work, I can't figure out how to do this with what I have. I've successfully drawn multi-line charts with d3 before, but can't see how to get there from here.

You can view what I have here: http://bl.ocks.org/philgyford/af4933f298301df47854 (or the gist)

I realise there's a lot of code. I've marked with "Hello" the point in script.js where the lines are drawn. I can't work out how to draw those lines once for each country, as opposed to just for the first one, which is what it's doing now.

I'm guessing that where I'm applying data() isn't correct for this usage, but I'm stumped.

UPDATE: I've put a simpler version on jsfiddle: http://jsfiddle.net/philgyford/RCgaL/

解决方案

The key to achieving what you want are nested selections. You first bind the entire data to the SVG element, then add a group for each group in the data (each country), and finally get the values for each line from the data bound to the group. In code, it looks like this (I've simplified the real code here):

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

The structure generated by this looks like svg > g > g.lines > path.line.imports. I've omitted the code for the export line here -- that would be below g.lines as well. Your data consists of a list of key-value pairs with a list as value. This is mirrored by the SVG structure -- each g.lines corresponds to a key-value pair and each path to the value list.

Complete demo here.

这篇关于在d3.js图表​​上绘制多组多行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！