d3：在数据中基于整数追加多个元素

Question

我是d3的新手，仍在研究一些基础知识。

根据我的理解，你不应该需要带有d3的循环。

如果我有以下数据：

[
  {
    "title": "mine",
    "shapes" : {
      "circle" : 15,
      "square": 20
    }
  },
  {
    "title": "yours", 
    "shapes": {
      "circle": 2,
      "square": 18
    }
  }
]

如何追加15个圆圈和20个方块？

我知道如何为对象中的每个项添加元素，但不知道如何在对象中使用整数。

非常感谢任何指导！

Answer 1

d3数据管道的要点是避免不必要的显式循环和过程代码。循环仍然有一席之地。

但是，让我们说你想成为惯用语，而不是循环。然后当你需要的是d3.range()。它将整数绑定到列表中。例如。 d3.range(4) == [0, 1, 2, 3]。如果您正在通过管道，有一个整数，并且需要每个值的元素直到该整数，关键代码段是：

g.selectAll('circle')
 .data(d => d3.range(d.shapes.circle))
 .enter()
 .append('circle')

可将来自您的数据项的圈数转换为多个圈。不幸的是，在实践中它并非相当。您正在处理多级结构，并且您可能不仅要生成N个不同的圆，而是根据某些更高级别的上下文来改变这些圆。所以在实践中它更像是：

g.selectAll('circle')
 .data((d, i) => d3.range(d.shapes.circle)
                   .map(j => [i, j]))
 .enter()
 .append('circle')

也就是说，对于数据数组中的第i条记录，用于创建圆圈的数据将i与来自d3.range()的j的值组合在一起。

完整代码比这里更舒适，但here's a live example on Plunker。

颜色由输入数据中的顺序选择;形状定位和不透明度是随机选择的。