使用多维数组/嵌套json文件创建d3水平条形图

Question

我正尝试使用以下嵌套json文件创建一个简单的d3条形图（http://bost.ocks.org/mike/bar/2/）。

{ 
"clustername": "cluster1", 
"children": [ 
{ 
"neighborhoodname": "Shaw", 
"children": [ 
    { 

    "totpop2000": "1005", 
    "children": [ 
    { 
     "name": "demographic", 
     "children": [ 
     {"name": "Black", "size2000":0.18}, 
     {"name": "White", "size2000":0.6}, 
     {"name": "Hispanic", "size2000":0.40}, 
     {"name": "Asian", "size2000":0.10} 
     ] 
     }, 
    { 
     "name": "wellbeing", 
     "children": [ 
     {"name": "Unemployment", "size2000":0.40}, 
     {"name": "Poverty", "size2000":0.1}, 
     {"name": "Without HS Education", "size2000":0.31} 
     ] 
     }, 
    { 
     "name": "crime", 
     "children": [ 
     {"name": "Violent Crime", "size2000":0.09}, 
     {"name": "Property Crime", "size2000":0.08} 
     ] 
     }, 
    { 
     "name": "housing", 
     "children": [ 
     {"name": "Home Ownership", "size2000":0.34}, 
     {"name": "Houses for Rent", "size2000":0.50} 
     ] 
    } 
    ] 
    } 
    ] 
    } 
] 
} 

到目前为止，我的JavaScript包括用于添加标记为size2000到SVG量的下列但是当我运行的代码，我似乎无法追加数据的适当阵列（即我得到的第一个数组/ "clustername": "cluster1"）在我的json文件中。

var data = d3.json("data/test.json", function(json) { 
 
\t console.log(json); 
 

 
\t  
 
var bar = chart2000.selectAll("g") 
 
     .data(data) 
 
    .enter().append("g") 
 
     .attr("transform", function(d, i) { return "translate(0," + i * height + ")"; }); 
 

 
    bar.append("rect") 
 
     .attr("width", function(d) { return x((d.size2000)*100); }) 
 
     .attr("height", height - 1); 
 

 
    bar.append("text") 
 
     .attr("x", function(d) { return x((d.size2000)*100) - 3; }) 
 
     .attr("y", height/2) 
 
     .attr("dy", ".35em") 
 
     .text(function(d) { return (d.size2000)*100); }); 
 

 
});

有没有办法让JSON数据结构和size2000值追加到SVG？如果是这样，怎么样？

Answer 1

使用D3制作的可视化的基本原则之一是数据与DOM中元素之间的对应关系。映射应该也尊重数据和DOM节点的层次结构，尽管它不是一个严格的要求。因此，如果数据是嵌套的，则可视化应也以某种方式嵌套（例如，由层次划分的多个条形图）。在另一个方向上走这个比喻，如果你想要一个扁平的条形图，那么数据应该也是一个扁平的值列表。

它不必平坦，但它会使实现和DOM映射更容易。我会将您手动为条形图的json数据映射到一个扁平列表中：

d3.json("data/test.json", function(json) { 

    var barChartData = []; 
    function addLeaves(node) { 
     if (typeof node.children !== "undefined") { 
      node.children.forEach(addLeaves); 
     } else { 
      barChartData.push(node); 
     } 
    } 
    addLeaves(json); 

    var bar = chart2000.selectAll("g") 
       .data(barChartData) 
    // ... 
}