處理沒有標識符的JSON數據

我是D3和javascript的新手，所以如果這很明顯，我很抱歉。我有一組數據在Flot中工作，但我似乎無法在d3中識別它，它是沒有標識符的json。如處理沒有標識符的JSON數據

{ 
"dataLine": [ [134, 43.39], [144, 45.34], [154, 47.45], [164, 48.25], [174, 48.14], [184, 48.21], [194, 47.64], [204, 47.58], [214, 52.18], [224, 58.18], [234, 53.19], [244, 61.28], [254, 56.50], [264, 53.92], [274, 57.27], [284, 58.73], [294, 57.28], [304, 52.91], [314, 55.07], [324, 60.58], [334, 61.16], [344, 62.64], [354, 60.39], [364, 62.79], [372, 65.24] ] 
}

我可以，如果我每個條目前面加上了「X」和「Y」標籤中的數據的工作，但我會如何處理數據，而標籤？假設第一個條目是「x」，第二個條目是「y」。我目前正在使用的代碼是

d3.json('3.json', function (data) 
{ 
data.forEach(function(d) 
{ 
    d.x = d.x; 
    d.y = d.y; 
}); 

x.domain(d3.extent(data, function(d) { return d.x; })); 
y.domain([0,d3.max(data, function(d) { return d.y; })]); 

svg.append("path") 
    .datum(data) 
    .attr("class", "area") 
    .attr("d", area); 
    //.attr("d", valueline); 


svg.append("g") 
    .attr("class", "x axis") 
    .attr("transform", "translate(0," + height + ")") 
    .call(xAxis); 

svg.append("g") 
    .attr("class", "y axis") 
    .call(yAxis) 
.append("text") 
    .attr("transform", "rotate(-90)") 
    .attr("y", 6) 
    .attr("dy", ".71em") 
    .style("text-anchor", "end") 
    .text("Force (N)"); 
});

而且數據看起來像

[ 
    {"x":134, "y":43.39}, {"x":144, "y":45.34}, {"x":154, "y":47.45}, {"x":164,"y":48.25}, {"x":174, "y":48.14}, {"x":184, "y":48.21}, {"x":194, "y":47.64}, {"x":204, "y":47.58}, {"x":214, "y":52.18}, {"x":224, "y":58.18}, {"x":234, "y":53.19}, {"x":244, "y":61.28}, {"x":254, "y":56.50}, {"x":264, "y":53.92}, {"x":274, "y":57.27}, {"x":284, "y":58.73}, {"x":294, "y":57.28}, {"x":304, "y":52.91}, {"x":314, "y":55.07}, {"x":324, "y":60.58}, {"x":334, "y":61.16}, {"x":344, "y":62.64}, {"x":354, "y":60.39}, {"x":364, "y":62.79}, {"x":372, "y":65.24} 
]

我可以繪製它像這樣，但我所有的歷史數據，就像是第一個例子，我知道我做錯了什麼因爲我現在正在盲目地跟隨教程和示例，並且非常感謝任何幫助或提示。爲了簡單起見，有沒有辦法繪製我發佈的第一組數據？如果是，那麼讓我進一步考慮一下，我如何繪製條目「dataLine」，並在同一個json文件中還有5個其他條目進行圖形化，這些條目的格式相同但標籤不同？

來源

2015-11-18 Ralre

你能從它做一個jsfiddle？我認爲更正這種方式更容易。 – Peter

對於第一個問題，不需要重新格式化數據。 d3提供accessor functions以不同格式獲取數據。在你的情況下，數組的數組，你需要：

var valueline = d3.svg.line() 
    .x(function(d) { 
     return d[0]; // this really should be x(d[0]) when you properly use scales 
    }) 
    .y(function(d) { 
     return d[1]; // this really should be y(d[0]) when you properly use scales 
    })

而且你會綁定到：

svg.append("path") 
    .datum(data.valueLine);

你的第二個問題是有點難度。爲此，您正在使用subselection。假設您的數據爲：

var data = { 
    "dataLine1": [ 
     [134, 43.39], 
     [144, 45.34], 
     ... 
    ], 
    "dataLine2": [ 
     [224, 58.18], 
     [234, 53.19], 
     ... 
    ], 
    "dataLine3": [ 
     [324, 60.58], 
     [334, 61.16], 
     ... 
    ] 
    };

而且您需要爲每個dataLine設置一行。首先綁定您的數據，每一行：

var myLines = svg.selectAll("line") 
    .data(d3.values(data)) // get me an array of 3 arrays 
    .enter() 
    .append("g") 
    .attr("class", "line");

然後創建子選擇創建的每個路徑：

myLines.append("path") 
    .datum(function(d){ 
     return d; // just return me the array! 
    }) 
    .attr("class", "area") 
    .attr("d", valueline) // using the accessor functions above 
    .style("fill", "none") 
    .style("stroke",function(d,i,j){ 
     return color(i); 
    });

這裏的一些工作代碼：

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <script data-require="[email protected]" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script src="script.js"></script> 
 
    </head> 
 

 
    <body> 
 
    <script> 
 

 
     var svg = d3.select('body') 
 
     .append('svg') 
 
     .attr('width', 500) 
 
     .attr('height', 500); 
 

 
     var data = { 
 
     "dataLine1": [ 
 
      [134, 43.39], 
 
      [144, 45.34], 
 
      [154, 47.45], 
 
      [164, 48.25], 
 
      [174, 48.14], 
 
      [184, 48.21], 
 
      [194, 47.64], 
 
      [204, 47.58], 
 
      [214, 52.18] 
 
     ], 
 
     "dataLine2": [ 
 
      [224, 58.18], 
 
      [234, 53.19], 
 
      [244, 61.28], 
 
      [254, 56.50], 
 
      [264, 53.92], 
 
      [274, 57.27], 
 
      [284, 58.73], 
 
      [294, 57.28], 
 
      [304, 52.91], 
 
      [314, 55.07] 
 
     ], 
 
     "dataLine3": [ 
 
      [324, 60.58], 
 
      [334, 61.16], 
 
      [344, 62.64], 
 
      [354, 60.39], 
 
      [364, 62.79], 
 
      [372, 65.24] 
 
     ] 
 
     }; 
 
     
 
     var color = d3.scale.category10(); 
 
     
 
     var valueline = d3.svg.line() 
 
     .x(function(d) { 
 
      return d[0]; 
 
     }) 
 
     .y(function(d) { 
 
      return d[1]; 
 
     }); 
 

 
     var myLines = svg.selectAll("line") 
 
     .data(d3.values(data)) 
 
     .enter() 
 
     .append("g") 
 
     .attr("class", "line"); 
 
     
 
     myLines.append("path") 
 
     .datum(function(d){ 
 
      return d; 
 
     }) 
 
     .attr("class", "area") 
 
     .attr("d", valueline) 
 
     .style("fill", "none") 
 
     .style("stroke",function(d,i,j){ 
 
      return color(i); 
 
     }); 
 

 
    </script> 
 
    </body> 
 

 
</html>

來源

2015-11-18 17:11:11 Mark

想要嘗試一下，我會盡快回復，感謝幫助！我一直在瘋狂:) – Ralre

非常感謝！我已經設法在我的代碼中使用它，儘管我必須弄清楚格式和縮放比例，我相信我可以弄明白！再次，謝謝！ – Ralre

處理沒有標識符的JSON數據

回答

相關問題