使用多维数组/嵌套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的方法，但是当我运行代码时，我似乎无法追加适当的数据数组（即，我得到了第一个array / "clustername": "cluster1" ）在我的json文件中。

 var data = d3.json("data/test.json", function(json) { console.log(json); 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)
    // ...
}