Javascript 使用D3.js从单个数据点生成多个DOM元素

假设我有如下数据：

[{from: 3, to: 5}, {from: 1, to: 2}]

var rects = row.selectAll('rect')
  .data(function(d) { return d3.range(d.to - d.from + 1);})

我想生成以下SVG：

<svg width="100" height="100">
  <g transform="translate(0,0)">
    <rect x="0" width="5" height="5"></rect>
    <rect x="10" width="5" height="5"></rect>
    <rect x="20" width="5" height="5"></rect>
  </g>
  <g transform="translate(0,30)">
    <rect x="0" width="5" height="5"></rect>
    <rect x="10" width="5" height="5"></rect>
  </g>
</svg>

现在，如何使用链语法为每个数据点生成多个矩形

我知道我可以这样做：

[{from: 3, to: 5}, {from: 1, to: 2}]

var rects = row.selectAll('rect')
  .data(function(d) { return d3.range(d.to - d.from + 1);})

---

但是我希望避免创建无用的数组。

您可以在

append（）

函数中迭代并在那里动态创建矩形：

var data=[{from:3，to:5}，{from:1，to:2}，{from:4，to:9}]；
var宽度=100；
var x=d3.scale.ordinal（）
.域（d3.范围（10））
.rangeRoundBands（[0，宽度]）；
var svg=d3。选择（'div'）。追加（'svg'））
.attr（'width'，width）
.attr（'height'，100）；
var row=svg.selectAll（'g'）
.数据（数据）
.enter（）.append（函数（d）{
var rects=document.createElements（'http://www.w3.org/2000/svg","g",；
对于（var i=d.from；i您的范围想法可能是最好的方法，因为d3从根本上会针对数据一对一地生成dom元素。我不会担心一些整数数组的任何效率/垃圾收集问题。谢谢您的回答！我在嵌套数据方面遇到了问题。如果您有时间，请看一看（）？图表的第一行应该有两段，但只显示一段。一些
g
组为空！诚然，
d3.range
解决方案也会出现这种情况，但我无法解释为什么。。。