一页上的多个多系列 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 方法，但以这种方式开始可能会更容易。