d3创建对象而不追加

d3 create object without appending

本文关键字：追加 创建对象 d3      更新时间：2023-09-26

我正在使用d3进行绘图，并试图创建一个svg对象，以便稍后添加到DOM中。

我以前有

var svg = d3.select(el).append("svg");
var graph = svg.append("g")
...etc...

出于我不想深入讨论的原因，我想在将svg元素附加到DOM之前创建它。

所以我做了

var svg = d3.select(document.createElementNS(d3.ns.prefix.svg, 'svg'))
var graph = svg.append("g")
...etc...

，这是有效的，在调试时，我可以看到svg是一个1元素的数组，子数组连接得很好。

问题出现在append步骤：

d3.select(el).append(svg);

在那里，我得到了一个错误Error: Failed to execute 'createElementNS' on 'Document': The qualified name provided ('[object SVGSVGElement]') contains the invalid name-start character '['.，我在这里看了一下：如何创建"；svg"；对象而不附加它？但这似乎正是他们的建议。

知道为什么会这样吗？我试过附加svg[0]，但也没有成功。append()似乎只接受字符串作为参数。

<小时>

编辑：d3参考https://github.com/mbostock/d3/wiki/Selections#append状态

selection.append（name）。。。"名称可以指定为常量字符串，也可以指定为返回要附加的DOM元素的函数。"

因此，我尝试了

d3.select(el).append(function(){return svg;});

但Error: Failed to execute 'appendChild' on 'Node': The new child element is null. 失败

如果svg是一个选择，svg.node()返回DOM元素，例如：

d3.select(el).append(function(){return svg.node();});

（请注意，我不确定在您的情况下svg是否是一个真正的选择，但您可以尝试一下。）

对此，您最好使用常规的element.appendChild函数。

您可以使用d3.select(el).node()获得对父元素的引用，然后，您可以对其调用.appendChild，将svg.node()作为要附加的元素传入。

所以，所有这些：

d3.select(el).node().appendChild(svg.node());
相关文章：