使用D3与多维数组/对象

Question

我有一个JSON文件，格式如下：

{
   "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，我无论如何都想不出如何将循环遍历每个对象并为每个创建新行，每次增加垂直偏移量。

我该如何循环遍历文件中的每个对象，为每个创建一个，然后为每一行创建文本+列，同时保留不同的嵌套值和数组索引？

- NChase

Answer 1

实现你想要的关键是使用嵌套选择。思路是将整个数据对象传递到第一层，并为元素创建一个SVG组。然后，类似于您现在所做的方式，为每个元素添加实际的可视化效果。

请查看Mike's tutorial on nested selections。记得用相应的元素替换当前硬编码的数据调用，例如.data(d.counts)而不是.enter([1, 5, 10, 6])。

- Lars Kotthoff