在一页上显示多个多系列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");

在那之前。

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

另一种方法(如果您刚刚开始，可能会更简单)是简单地在新属性中添加额外的数据，添加访问该数据的新行生成器，并重复生成行的代码，并使用不同的类名和不同的生成器调用行生成器。这是一种老生常谈的方法，我一般不推荐，但这样可能更容易上手。