D3線發生器處理多個陣列

，我有以下結構的JSON文件中的3個數組：D3線發生器處理多個陣列

我試圖解析座標數據到的東西的JSON文件，可以通過D3閱讀路徑/線條生成器。我首先必須找到一種方法來確保值是實際的數字而不是字符串。一個完整的討論可以在這裏找到： D3/JS mapping a JSON data callback

這種討論促使我不能只考慮通過.map()爲數字格式的JSON數據，還要考慮嵌套/壓縮格式，該線發生器可以使的感覺。這是我一直以來的目標。如上所述，My JSON有3個陣列，xs，ys和id。 id只支配顏色，並且取3個值中的1個（0,1,2）。我建議這種做法：

var obj = raw_json[0]; 
var data = obj.id.map((id, i) => [+id, +obj.xs[i], +obj.ys[i]]);

我的線發生器功能：

var valueLine = d3.svg.line() 
    .x(function(d) {return xScale(d.xs);}) 
    .y(function(d) {return yScale(d.ys)});

但是我得到錯誤數以萬計的我，可惜我沒有與解析相關問題經驗豐富，我不知道如何繼續。

Full block & JSON here。

來源

2017-05-11 Arash Howaida

你有錯誤的數據格式，請小提琴，或筆從該塊，所以我們可以對其進行編輯... – bumbeishvili

@bumbeishvili哦，我明白了，我想你可以派生它和編輯它的方式。只要你在github上有一個賬戶。 –

很高興看到您在我們正朝着正確的方向前進時對我們的數據重構提出了建議。我建議你應該將三個單獨的數組轉換爲每個點的單個數組的數組，以便更容易地使用行生成器，並且不需要跨數組讀取來收集點的數據。

但是這一次，您沒有正確訪問您的值。通過使用function(d) { return xScale(d.xs); }，您假定您的積分由具有屬性xs和ys的對象表示。然而，我建議的方法通過將信息存儲到數組中來擺脫這些屬性。基本上有解決此兩種方式：

調整你的路徑產生的.x()和.y()回調，同時保持你的數據結構。

var obj = raw_json[0]; 
var data = obj.id.map((id, i) => [+id, +obj.xs[i], +obj.ys[i]]); 

// Remember, that d is a point's array [id, x, y] 
var valueLine = d3.svg.line() 
    .x(function(d) { return xScale(d[1]); }) 
    .y(function(d) { return yScale(d[2]); });

如果你喜歡你的儲存點數據對象，而不是，另一個解決辦法是調整你的數據是如何構建的。

// Structure data into an array of objects {id, x, y} 
var obj = raw_json[0]; 
var data = obj.id.map((id, i) => ({ 
    id: +id, 
    x: +obj.xs[i], 
    y: +obj.ys[i] 
})); 

// Keep your code as d now has properties x and y. 
var valueLine = d3.svg.line() 
    .x(function(d) { return xScale(d.x); }) 
    .y(function(d) { return yScale(d.y); });

來源

2017-05-11 23:18:26 altocumulus

我認爲你沒有正確建模與data(data).enter()和/或d3.svg.line()一起使用的數據。當你定義你的valueLine函數時，它需要一系列具有xs和ys屬性的對象，並且你正在向它提供一組數組。

手動嘗試一下，看看它是如何工作 valueLine([{xs: 1, ys: 1}, {xs: 3, ys: 5}, {xs: 12, ys: 21}]) 並查看生成的SVG路徑： "M100,400L300,-400L1200,-3600"

因此，也許你可以改變你如何準備你的數據是這樣的：
var data = obj.id.map((id,i) => ({id: +id, xs:+obj.xs[i], ys: +obj.ys[i]}));

來源

2017-05-11 21:55:32 mgc

D3線發生器處理多個陣列

回答

相關問題