javascript - 将 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，我一辈子都想不出如何将循环遍历每个对象的东西链接在一起，并为每个对象创建一个新行，每次都增加垂直偏移量。

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

Answer 1

实现您想要的效果的关键是使用嵌套选择。这个想法是将整个数据对象传递到第一级并为元素创建一个 SVG 组。对于这些元素中的每一个，实际的可视化将以与您现在正在做的类似的方式添加。

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