gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 20:53:49 26 4
gpt4 key购买 nike

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

最佳答案

既然你这么说...

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>

关于javascript - 多个数据系列的相同日期,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47884157/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com