javascript - 一页上有多个多系列 d3 折线图

Question

我想使用 d3 在一页上绘制多个时间序列折线图，每个折线图都有两条线。

使用 this page 上的示例对于多个图表，我有代码在每个图表上处理单行。但我不确定如何最好地修改该示例以使用多折线图。

这个例子是这样做的:

d3.csv("sp500.csv", function(data) {
  var formatDate = d3.time.format("%b %Y");

  d3.select("#example")
      .datum(data)
    .call(timeSeriesChart()
      .x(function(d) { return formatDate.parse(d.date); })
      .y(function(d) { return +d.price; }));
});

定义了 TimeSeriesChart() in this file .

我如何最好地调整它以应对两条(或更多)线(具有相同的 x 轴值和相同的 y 尺度)？

FWIW，我的数据在 JS 数组/哈希中，而不是从 CSV 中读取，但我想原理是一样的。

Answer 1

您可以以相同的方式传入包含多行数据的数据结构。唯一的区别在于您将如何处理引用文件中的数据。您需要更改中的功能

selection.each(function(data) {

首先，您需要调整正在进行的预处理以及类似地确定轴限制的代码。再往下，你会改变

// Update the line path.
  g.select(".line")
      .attr("d", line); 

类似于

g.selectAll(".line").data(<data for your two lines here>)
 .enter()
 .append("path")
 .attr("class", "line")
 .attr("d", line);

并删除该行

gEnter.append("path").attr("class", "line");

在那之前。

确切的更改将取决于您传递的格式。

另一种方法(如果您刚刚开始可能更容易)是简单地在新属性中添加额外的数据，添加一个新的行生成器来访问该数据并重复生成行的代码并调用具有不同类名和不同生成器的线生成器。这是一种我一般不推荐的 hacky 方法，但以这种方式开始可能更容易。