D3.js 在d3中动态附加形状

我试图根据

基准所包含的内容，动态地
附加
一个形状。我的目标是：

const boom = [
  {
    shape: 'rect',
    color: 'red',
    width: 50,
    height: 50,
    x: 50,
    y: 100
  }
]

我的代码是：

const stage = d3.select('stageContainer')
    .append('svg')
    .attr('width', 100)
    .attr('height', 100)
    .style('border-width', '2')
    .style('border-color', 'red')
    .style('border-style', 'solid')

stage.selectAll('.group01')
      .data(boom)
      .enter()
      .append(d => document.createElement(d.shape))
      .attr('fill', d => d.color)
      .attr('width', d => d.width)
      .attr('height', d => d.height)
      .attr('x', d => d.x)
      .attr('y', d => d.y)

我可以看到它正在添加到DOM中，但实际上它没有呈现。
要创建SVG元素，必须使用
文档。CreateElements
：

.append(d => document.createElementNS('http://www.w3.org/2000/svg', d.shape))

或者，您可以使用d3中的内置名称空间。名称空间
：

.append(d => document.createElementNS(d3.namespaces.svg, d.shape))

以下是更改后的代码：


const-boom=[{
形状：“rect”，
颜色：“蓝色”，
宽度：50，
身高：50，
x:40，
y:10
}];
const stage=d3。选择（'body'）
.append（'svg'）
.attr（'width'，100）
.attr（'height'，100）
.style（'border-width'，'2'）
.style（'边框颜色'，'红色'）
.style（'border-style'，'solid'）
stage.selectAll（“.group01”）
.数据（动臂）
.输入（）
.append（d=>document.createElements（d3.namespaces.svg，d.shape））
.attr（'fill'，d=>d.color）
.attr（'width'，d=>d.width）
.attr（'height'，d=>d.height）
.attr（'x'，d=>d.x）
.attr（'y'，d=>d.y）
试试
.append（d=>d.shape）
试过了。我不断得到：
“TypeError:无法在“节点”上执行“insertBefore”：参数1不是“节点”类型。
现在我仔细阅读了文档，如果它是一个函数，它必须返回与常量字符串不同的类型。该方法应该能够处理不同的函数返回（包括一个字符串）。此外，stage维度只是演示性的，但感谢提示：-）@GerardoFurtado尽管这个问题有一个公认的答案，你介意dupe将其作为副本来处理吗？@altocumulus Done，实际上是一样的。这在我做的搜索中没有出现（S.O搜索机制并不十分出色）。但是现在我无法删除我的答案…@altocumulus:我找到了另一种方法（没有名称空间），并将其添加为对上一个问题的回答。哦，谢谢你提供关于标题的提示。对此表示感谢，并将在未来铭记：）