我有一個名為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)
應該回傳這樣的地圖結構：
{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})并沒有像我想要的那樣回傳一組波長和幅度資料對，但我不確定如何在地圖中公開正確的資料。
您如何在地圖中導航并為地圖中包含的每個物件繪制新線？
uj5u.com熱心網友回復：
由于 的輸出d3.group是一個 javascript Map，因此需要將其轉換為元組陣列[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}, ...] ],
]
使用sortedGraphDatawithappend將為每個資料集創建一個路徑，并且d可以通過將值傳遞給線生成器函式來計算 SVG 路徑的屬性。由于 value 陣列是每個資料集的第二個元素，因此可以使用索引 1 訪問它：
.attr("d", d => valueline(d[1])).
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/440739.html
標籤：javascript 字典 d3.js 数据科学 图形数据科学
上一篇：從標簽計算關系陣列