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])。

使用D3与多维数组/对象

1 个答案: