javascript - 多个数据系列的相同日期

Question

我有一个数组 timeSeries，假设有 10 个系列，每个系列有 100 个数据点。我有另一个包含 100 个日期的数组 dates。

如何让 d3 在同一张图表上绘制 10 个系列，使用 100 个日期作为它们的 x 值和 100 个各自的值(例如 timeSeries[0])作为它们的 y 值？

需要明确的是，timeSeries 中的 10 个数组只有 y 值 - 将它们视为价格序列。这 10 个数组(每个数组有 100 个价格)精确映射到我需要以某种方式进入的日期中的 100 个日期。如果只有一个价格系列，我会将它们解析为一个数组并执行 d.date 和 d.price，但其中 10 个(或 1000 个)可能效率不高？

这让我走到了一半:

canvas.selectAll("path")
    .data(timeSeries)
    .enter()
    .append("path")
    .attr("class", "line")
    .attr("d", d3.line().x((d,i) => x(i)).y(d => y(d)));

现在我只需要找到一种方法来使用dates 而不是i...

在没有 10 个关联数组且每个数组中都有日期的情况下，实现此目标的最有效方法是什么？我可能会将其扩展到 100 或 1000，因此希望尽可能保持精简。

谢谢!

[奖励问题:假设我在 timeSeries 中添加了另一层嵌套，即有 10 个系列的二维数组 - 为什么 (d => y(d[0])) 不绘制任何内容，即使控制台输出是和上面的情况一样吗？]

Answer 1

既然你这么说...

10 arrays (with 100 prices each) map exactly to the 100 dates in dates [array]

...您只需要这些日期的索引。

所以，这可以是您的线条生成器:

var lineGenerator = d3.line()
  .x((d, i) => xScale(dates[i]))
  //index here--------------^

这是一个非常基本的演示。我正在创建日期数组，从 2011 年到 2017 年......

var dates = d3.range(2011, 2018, 1).map(d => d3.timeParse("%Y")(d));

...然后创建一个包含 10 个内部数组的数组，每个数组在 y 轴上有 10 个随机值:

var data = d3.range(10).map(d => d3.range(10).map(d => Math.random() * 150));

结果如下:

var dates = d3.range(2011, 2018, 1).map(d => d3.timeParse("%Y")(d));
var data = d3.range(10).map(d => d3.range(10).map(d => Math.random() * 150));
var svg = d3.select("svg");
var xScale = d3.scaleTime().range([0, 300]).domain(d3.extent(dates));
var colors = d3.scaleOrdinal(d3.schemeCategory10);
var lineGenerator = d3.line()
  .x((d, i) => xScale(dates[i]))
  .y(d => d);
var lines = svg.selectAll(null)
  .data(data)
  .enter()
  .append("path")
  .attr("d", lineGenerator)
  .style("fill", "none")
  .style("stroke", (d, i) => colors(i))

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>