使用D3與多維數組/對象

我有一個JSON文件，如下所示的格式：使用D3與多維數組/對象

{ 
    "John":{ 
     "name":"John", 
     "counts":[ 1, 5, 10, 6 ] 
    }, 
    "Steve":{ 
     "name":"Steve", 
     "counts": [ 6, 4, 50, 40 ] 
    } 
}

我試圖做一個D3的可視化，做一個簡單的柱狀圖爲那些數，左邊有一個名稱標籤。當我有一個數據系列和名字，我能做到這一點，像這樣：

svg.selectAll("rect").data([ 1, 5, 10, 6 ]).enter().append("rect") 
      .attr("x",function(d,i) { return i*columnWidth; }) 
      .attr("y",function(d) { return (rowHeight-scale(d));}) 
      .attr("width",columnWidth) 
      .attr("height",function(d) { return snowScale(d); }); 

svg.selectAll("text").data("John").enter().append("text") 
     .text(function(d) { return d; }) 
     .attr("x",nameBuffer) 
     .attr("y",function(d,i) { return rowHeight; })    
     .attr("font-size", "14px");

這適用於單個行直接提供的數據，與文本標籤到左側，然後一系列的列每個數據點的寬度相同。但是我剛開始使用D3，而且我不能在我的生活中弄清楚如何鏈接一些循環遍歷每個對象的東西，併爲每個對象創建一個新行，每次添加垂直偏移量。

如何循環，爲文件中的每個對象創建一個，然後爲每一行創建文本+列，同時保留不同的嵌套值和數組索引？

來源

2012-12-27 NChase

實現你想要的東西的關鍵是使用嵌套選擇。我們的想法是將您的整個數據對象傳遞到第一級，併爲這些元素創建一個SVG組。對於這些元素中的每一個，然後以與您現在正在做的相似的方式添加實際可視化。

看看Mike's tutorial on nested selections。請記住用相應的元素替換你當前的硬編碼數據調用，例如.data(d.counts)而不是.enter([1, 5, 10, 6])。

來源

2012-12-27 23:50:34

使用D3與多維數組/對象

回答

相關問題