Question

我正在使用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 '['.我在这里看了一眼：How to create "svg" object without appending it?但似乎这就是他们的建议。

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

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

selection.append（名称） ...... ...... “可以将名称指定为常量字符串，也可以将其指定为返回要追加的DOM元素的函数。”

因此我尝试了

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

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

失败了

Answer 1

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

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

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

Answer 2

最好使用常规element.appendChild功能。

您可以使用d3.select(el).node()获取对您的父元素的引用，然后，您可以在其上调用.appendChild，传递svg.node()作为要追加的元素。

所以，一起：

d3.select(el).node().appendChild(svg.node());

d3创建对象而不附加

2 个答案: