如何使用 D3.js 为 Javascript 地图对象中的每个组绘制单独的线条

Question

我有一个名为 graphData 的数据集，其中包含三个值，wavelength、magnitude 和 name。

let array = [
{name: "dataset 1", wavelength: 2, magnitude: 20}
{name: "dataset 1", wavelength: 3, magnitude: 22}
{name: "dataset 1", wavelength: 4, magnitude: 19}
{name: "dataset 2", wavelength: 2, magnitude: 14} //and so on...
]

我使用 d3.group() 将数据集分组，使用 name 值作为键

let sortedGraphData = d3.group(graphData, d => d.fullId)

应该return这样的地图结构：

{key: "dataset 1"
values: [
{wavelength: 2, magnitude: 20}
{wavelength: 3, magnitude: 22}
{wavelength: 4, magnitude: 19}
]}

{key: "dataset 2"
values: [
{wavelength: 2, magnitude: 14}
///and so on...
]}

但是当我尝试使用

将该数据绘制到我的图表上时

 let valueline = d3.line()
.x(function(d){return x(+d.wavelength)})
.y(function(d){return y(+d.magnitude)});


graph.append("path")
.data(sortedSessionGraphData)
.attr("class", "line")
.attr("d", valueline);

我收到以下错误：Error: <path> attribute d: Expected number, "MNaN,NaNLNaN,NaN".

我认为 d3.line().x(function(d){return +d.wavelength}) 并没有像我想要的那样 return 设置波长和幅度数据对数组，但我不确定如何在地图.

如何在地图中导航并为地图中包含的每个对象绘制新线？

Answer 1

由于 d3.group 的输出是一个 javascript 映射，因此需要将其转换为 [key,value] 元组数组才能迭代：

let sortedGraphData = Array.from(d3.group(graphData, d => d.fullId))

通过此更改，sortedGraphData 现在具有以下结构：

[
  ["dataset 1", [{wavelength: 2, magnitude: 20}, ...]  ],
  ["dataset 2", [{wavelength: 2, magnitude: 14}, ...]  ],
]

使用sortedGraphData和append将为每个数据集创建一个路径，并且可以通过将值传递给线生成器函数来计算SVG路径的d属性。由于值数组是每个数据集的第二个元素，因此可以使用索引 1:

访问它

.attr("d", d => valueline(d[1])).

如何使用 D3.js 为 Javascript 地图对象中的每个组绘制单独的线条

How do I graph an individual line for each the groups within a Javascript map object using D3.js

javascript

dictionary

d3.js

data-science

graph-data-science