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方法，我一般不会推荐这种方法，但可能更容易以这种方式开始。

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

1 个答案: