Question

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

这是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...

...正在将一个rect附加到另一个rect中：

<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>

根据数据动态在svg内部创建rect

1 个答案: