javascript - 根据数据在 svg 中动态创建 rect

Question

我刚开始学习 D3，想动态创建 <rect>在 SVG 内部，在 div 内部。

这是 html:

<div class="canvas">
  <svg></svg>
</div>

这是我试过的 JS:

var data = [
  {width: 300, height: 100, fill: 'purple'}
];
var c = d3.select('.canvas');
var r = c.select('svg').append('rect');//first creating an rect.
r.selectAll('rect').data(data)//then select whatever the rect i have inside svg
.enter().append('rect')
.attr('width', f=>f.width)
.attr('height', f=>f.height)
.attr('fill', f=>f.fill);

它完全没有显示错误。我不知道真正的错误在哪里。到处寻找，但没有找到任何合适的解决方案。

Answer 1

你的 r选择...

var r = c.select('svg').append('rect');

...对应一个<rect>元素。因此，您的输入选择...

r.selectAll('rect')
  .data(data)
  .enter()
  .append('rect')
  //etc...

... 将一个矩形附加到另一个矩形内:

<svg>
    <rect>
        <rect width="300" height="100" fill="purple"></rect>
    </rect>
</svg>

那当然行不通。

因此，应该是:

var r = c.select('svg').selectAll('rect')
  .data(data)
  .enter()
  .append('rect')
  //etc...

这里是你的代码有那个变化:

var data = [{
  width: 300,
  height: 100,
  fill: 'purple'
}];
var c = d3.select('.canvas');
var r = c.select('svg').selectAll('rect')
  .data(data)
  .enter()
  .append('rect')
  .attr('width', f => f.width)
  .attr('height', f => f.height)
  .attr('fill', f => f.fill);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div class="canvas">
  <svg></svg>
</div>