javascript - d3 : Appending multiple elements based on integer in data

Question

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

据我了解，您不需要使用 d3 进行循环。

如果我有以下数据:

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

如何附加 15 个圆形和 20 个正方形？

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

任何指导将不胜感激!

Answer 1

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

但是假设您想要惯用，而不是循环。然后当你需要的是d3.range()。它将整数绑定(bind)转换为列表。例如。 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 .

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