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

Question

假设我有这样的数据:

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

我想生成以下 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>

基本上，对于每个数据点，我都必须生成 to - from + 1 矩形。我是这样开始的:

var width = 100;
var x = d3.scale.ordinal()
  .domain(d3.range(10))
  .rangeRoundBands([0, width]);

var svg = d3.select('svg').append('svg')
  .attr('width', width)
  .attr('height', 100);
var row = svg.selectAll('g')
  .data(data)
  .enter().append('g')
  .attr('transform', function(d, i) { return 'translate(0,' + i * 30 + ')';});

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

我知道我可以这样做:

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

但我想避免创建无用的数组。

Answer 1

您可以在 append() 函数中迭代并在那里动态创建您的 rects:

var data = [{from: 3, to: 5}, {from: 1, to: 2}, {from: 4, to: 9}];

var width = 100;

var x = d3.scale.ordinal()
  .domain(d3.range(10))
  .rangeRoundBands([0, width]);

var svg = d3.select('div').append('svg')
  .attr('width', width)
  .attr('height', 100);

var row = svg.selectAll('g')
  .data(data)
  .enter().append(function(d) {
    var rects = document.createElementNS('http://www.w3.org/2000/svg', 'g');
    for (var i = d.from; i <= d.to; i++) {
      var rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
      rect.setAttribute('width', 5);
      rect.setAttribute('height', 5);
      rect.setAttribute('x', (i - d.from) * 10);
      rects.appendChild(rect);
    }
    return rects;
  })
  .attr('transform', function(d, i) {
    return 'translate(0,' + i * 30 + ')';
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div></div>