基本D3 - 在對象內部使用數組

Question

我對D3很新穎，現在我被困在一個特定的主題中，我認爲它非常基礎。我一整天都在研究一些能夠幫助我的東西，但是我發現的一切都不是我所需要的，無論如何，如果它已經被問到，我從現在開始道歉。

基本上，我已經創建使用數組散點圖到目前爲止，如：

var dataset = [[100,220],[130,350],[70,60],[100,140],[520,300],[120,280],[390,170]]; 

然後：

 var chart = d3.select("body") 
    .append("svg") 
    .attr("width",w) 
    .attr("height",h); 

    var plot = chart 
    .selectAll("circle") 
    .data(dataset) 
    .enter() 
    .append("circle") 
    .attr("cx",function(d){return d[0];}) 
    .attr("cy",function(d){return d[1];}) 
    .attr("r",function(d,i){return i*4}); 

如果現在我想用人造物體，而不是一個數據集工作陣列它仍然工作很好，只需進行一些調整：

var dataset = [ 
    {x:100,y:220}, 
    {x:130,y:350}, 
    {x:70,y:60}, 
    {x:100,y:140}, 
    {x:520,y:300}, 
    {x:120,y:280}, 
    {x:390,y:170} 
    ]; 

更新後的代碼：

var chart = d3.select("body") 
    .append("svg") 
    .attr("width",w) 
    .attr("height",h); 

    var plot = chart 
    .selectAll("circle") 
    .data(dataset) 
    .enter() 
    .append("circle") 
    .attr("cx",function(d){return d.x;}) 
    .attr("cy",function(d){return d.y;}) 
    .attr("r",function(d,i){return i*4}); 

然後我採取了一步，創造了多個對象與多單x和y座標（我感興趣的是特定的情況下，因爲我的未來工作的數據集[真鈔]是由一系列的風力渦輪機，每個都有數千個xy點）。

var dataset = [ {Turbine: "01", x:[100,130,70,100],y:[220,350,60,140]}, 
         {Turbine "02", x:[520,120,390,500], y:[300,280,170,400]}; 

到目前爲止，我還沒有知道在上面的代碼中應該做些什麼改進才能工作。我意識到d.x和d.y現在不會提供單個x和單個y點，它們提供了數組，這就是爲什麼之前的代碼現在無用，因爲屬性cx和cy每次迭代只需要一個座標。我試圖找到一種方式來在某種程度上能夠使用子選擇中的新索引（對於d中的每個i，代碼應該使用ii從子選擇d [i] .x [ii ]）。

任何想法？提前感謝您的時間！

Answer 1

您需要考慮如何將實際數據轉換爲散點圖。我所建議的是將所有數據平鋪成單獨的點，並用不同的顏色區分這兩個渦輪機。

var colors = ['orange', 'green']; 

function convertData(dataset) { 
    var data = []; 
    dataset.forEach(function(oneDataset, datasetIndex) { 
    // Split the x and y arrays into pairs 
    // (that's assuming oneDataset.x and oneDataset.y are the same length!) 
    for (var i=0; i<oneDataset.x.length; i++) { 
     data.push({ 
     x: oneDataset.x[i], 
     y: oneDataset.y[i], 
     color: colors[datasetIndex] 
     }); 
    } 
    }); 
} 

var rawDataset = [ {Turbine: "01", x:[100,130,70,100], y:[220,350,60, 140]}, 
        {Turbine: "02", x:[520,120,390,500], y:[300,280,170,400]}; 

var dataset = convertData(rawDataset); 

現在重用你的 「解決方案2」 的代碼，但與新的顏色改進：

var plot = chart 
    .selectAll("circle") 
    .data(dataset) 
    .enter() 
    .append("circle") 
    .attr("cx", function(d) {return d.x;}) 
    .attr("cy", function(d) {return d.y;}) 
    .attr("r", function(d,i) {return i*4}) 
    .attr("fill", function(d) {return c.color}); 

這僅僅是一個解決方案。但是您可能需要在所有情況下將您的長陣列「變平」爲座標對以呈現分散。