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

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)
    // ...
}