多个数据系列的相同日期答案

【问题标题】：Same dates for multiple data series多个数据系列的相同日期
【发布时间】：2017-12-19 09:50:20
【问题描述】：

我有一个数组 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])) 不绘制任何内容，即使控制台输出为和上面的情况一样吗？]

【问题讨论】：

抱歉，timeSeries 中的 10 个数组只有 y 值 - 将它们视为价格序列。这 10 个数组（每个数组有 100 个价格）精确地映射到 dates 中的 100 个日期，我需要以某种方式了解这些日期。如果只有一个价格系列，我会将它们解析为一个数组并执行 d.date 和 d.price，但拥有 10 个（或 1000 个）可能效率不高？
是的。我才意识到这一点。您还可以编辑您的问题，明确这一点。
谢谢，补充一点解释！

标签： javascript arrays d3.js linechart

【解决方案1】：

既然你这么说……

10 个数组（每个数组有 100 个价格）精确映射到 dates [array] 中的 100 个日期

...您只需要这些日期的index。

所以，这可以是你的线路生成器：

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>

【讨论】：