Javascript 创建SVG元素而不渲染它们

如何创建一个返回自定义SVG图形而不附加任何内容的函数？我可以创建一个空的选择并返回它吗？ 我目前拥有的：

function makeGraphic(svgParent) {
    return svgParent.append('circle').attrs({...});
}

这就是我想要的：

function makeGraphic() {
    return d3.makeCircle?.attrs({...});
}

svgParent.append(makeGraphic());

---

您可以在函数中创建一个带有svg名称空间的临时svg节点，而无需渲染svg。然后，在操作svg并返回某种形状时，可以将其视为典型节点

需要注意的一点是，

.append（）

接受标记名或函数，因此我在下面提供的函数不是它的结果：

var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，400）
.attr（“高度”，200）
.attr（“转换”、“翻译（200100）”）；
var makeCircle=函数（）{
//创建一个临时svg
让svg=document.createElements（d3.namespaces.svg，“svg”）
//创建一个圆
让circle=d3.选择（svg）.追加（“circle”）
.attr（“r”，20）
.attr（“填充”、“钢蓝”）；
//回圈
返回圆.node（）；
}
append（makeCircle）
在我看来，这是使用计算机的最佳情况。您也可以使用，但在D3代码中，分离元素更为惯用

要创建分离的
任何
SVG元素，您只需要：

var detached = d3.create('svg:whatever');

根据文件,

给定指定的元素名称，返回单个元素选择，其中包含当前文档中给定名称的分离元素

这与非常类似，因为在内部
d3.create
使用
document.createElement
。但请注意，它使用的是
document.createElement
，而不是
document.createElements
，因此名称空间在这里是必需的：

var detached = d3.create('svg:whatever');
//this is the namespace----ˆ

然后，在此之后，您可以创建所需的结构。例如：

detached.selectAll(null)
    .data(d3.range(5))
    .enter()
    .append("circle")
    //etc...

最后，使用
append
，获取分离元素的节点并将其附加到任何需要的位置：

svg.append(function(){ return detached.node();});

下面是一个演示，函数
makeGraphic
创建一个分离的元素，并返回其节点。然后，我们将返回的值附加到SVG：


var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，500）
.attr（“高度”，300）；
函数makeGraphic（）{
var detached=d3.create（'svg:g'）；
已分离。选择全部（空）
.数据（d3.范围（10））
.输入（）
.附加（“圆圈”）
.attr（“cx”，函数（）{
返回Math.random（）*500
})
.attr（“cy”，函数（）{
返回Math.random（）*300
})
.attr（“r”，函数（）{
返回Math.random（）*50
})
.attr（“填充”，函数（u，i）{
返回d3.schemeCategory10[i]
});
返回detached.node（）；
};
svg.append（makeGraphic）
回答得不错，我甚至没有想到要使用
d3.create（）
——我想这只是我的习惯。最后，这几乎和你使用香草javascript时遇到的情况一样。