8

我有一个格式如下的 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，我一生都无法弄清楚如何将循环通过每个对象并为每个对象创建一个新行的东西链接在一起，每次都增加垂直偏移量。

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

4

1 回答 1

7

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

看看Mike 的关于嵌套选择的教程。请记住用相应的元素替换您当前的硬编码数据调用，例如，.data(d.counts)而不是.enter([1, 5, 10, 6]).

于 2012-12-27T23:50:34.437 回答