Javascript 基于数据在svg中动态创建rect

我刚刚开始学习D3，希望在SVG中动态创建

，SVG位于div中

这是html：

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

---

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

您的

r

选择

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

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

。。。对应于

元素。因此，请输入您的选择

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

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

。。。正在另一个矩形内追加一个矩形：

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

以下是更改后的代码：

var数据=[{
宽度：300，
身高：100，
填充：“紫色”
}];
var c=d3.select（'.canvas'）；
var r=c.select（'svg'）。selectAll（'rect'））
.数据（数据）
.输入（）
.append（'rect'）
.attr（'width'，f=>f.width）
.attr（'height'，f=>f.height）
.attr（'fill'，f=>f.fill）
您的
r
选择

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

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

。。。对应于
元素。因此，请输入您的选择

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

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

。。。正在另一个矩形内追加一个矩形：

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

以下是更改后的代码：


var数据=[{
宽度：300，
身高：100，
填充：“紫色”
}];
var c=d3.select（'.canvas'）；
var r=c.select（'svg'）。selectAll（'rect'））
.数据（数据）
.输入（）
.append（'rect'）
.attr（'width'，f=>f.width）
.attr（'height'，f=>f.height）
.attr（'fill'，f=>f.fill）

谢谢@Gerardo，一切正常。以前我认为如果元素不存在，那么调用
select（）
将抛出错误，这就是为什么我首先附加
rect
。谢谢@Gerardo，它工作正常。以前我认为若元素不存在，那个么调用
select（）
将抛出错误，这就是为什么我首先附加
rect
。