2

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

将此页面上的示例用于多个图表，我的代码在每个图表上使用单行。但我不确定如何最好地修改该示例以使用多折线图。

该示例执行此操作：

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()定义。

我将如何最好地调整它以处理两条（或更多）线（具有相同的 x 轴值和相同的 y 比例）？

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

4

1 回答 1

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 方法，但以这种方式开始可能更容易。

于 2013-05-01T19:28:46.017 回答