任意多行（和特定數據格式）的D3線圖

我在D3中遇到了一些麻煩，而且我正在觸動我的智慧結束。基本上我有一個時間序列圖，任意多行，並且源數據不能在手邊方便的修改（但可以在客戶端操作）。任意多行（和特定數據格式）的D3線圖

的數據格式正是如此（有任意多個標籤）：

object = [ 
{ 
    "_id": "2012-08-01T05:00:00", 
    "value": { 
    "label1": 1.1208746110529344, 
    "label2": 0.00977592175310571 
    } 
}, 
{ 
    "_id": "2012-08-15T05:00:00", 
    "value": { 
    "label1": 0.7218920737863477, 
    "label2": 0.6250727456677252 
    }, 
    ....

我已經試過類似：

var vis = d3.select.(element) 
    .append("svg:svg") 
    .attr("width", width) 
    .attr("height", height) 
    .append("svg:g"); 

var line = d3.svg.line() 
    .x(function(data) {return x(new Date(data._id));}) 
    .y(function(data) {return y(data.value);}); 


vis.append("svg:path") 
    .attr("d", line(object)) 
    .attr("stroke", "black");

這似乎無法通過Y訪問，以訪問正確的值我得到了「錯誤：問題分析」以及大量的「NaNL3.384615384615385，NaNL6.76923076923077，NaNL10.153846153846155」。但是，如果我通過類似硬標籤值：

.y(function(data) {return y(data.value.label1);});

它工作得很好，但只適用於一行。有誰可以提供幫助嗎？

來源

2012-08-22 jshwlkr

我想通過將數據放入相同格式的並行陣列啓動：（您可以使用d3.keys自動計算的系列名稱，而不是硬編碼它們如上）

var series = ["label1", "label2"].map(function(name) { 
    return data.map(function(d) { 
    return {date: new Date(d._id), value: d.value[name]}; 
    }); 
});

現在series是一個數組數組。單個系列，如LABEL1，會是這個樣子：

{date: new Date(2012, 7, 1, 5, 0, 0), value: 1.1208746110529344}, 
{date: new Date(2012, 7, 15, 5, 0, 0), value: 0.7218920737863477}, 
…

因爲它們具有相同的格式，你可以使用相同的線產生的所有系列：

var line = d3.svg.line() 
    .x(function(d) {return x(d.date); }) 
    .y(function(d) {return y(d.value); });

而且同樣嵌套數組很適合數據連接以創建所需的路徑元素：

svg.selectAll(".line") 
    .data(series) 
    .enter().append("path") 
    .attr("class", "line") 
    .attr("d", line);

來源

2012-08-23 03:29:33 mbostock

正是我需要的，謝謝！ – jshwlkr

嘗試合併parseFloat以確保您轉換爲浮點數，而不是隱式轉換爲整數。如果仍然無法正常工作，請嘗試對字符串進行子串處理（切掉一些精度），直到它能夠正常工作。

來源

2012-08-22 23:14:33

任意多行（和特定數據格式）的D3線圖

回答

相關問題