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

Generating multiple DOM elements from a single data point with D3.js

本文关键字：DOM 元素 js D3 单个 数据 使用      更新时间：2023-09-26

假设我有这样的数据：

[{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 + ')';});

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

我知道我可以这样做：

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

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

您可以在append()函数中迭代，并在那里动态创建rect：

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>

相关文章：