d3创建对象而不附加

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 '['.我已经看过这里:如何创建"svg"对象而不附加它？但似乎这正是他们的建议.

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

---

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

selection.append(name)...... ......"可以将名称指定为常量字符串,也可以指定为返回要追加的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在你的情况下是一个真正的选择,但你可以尝试一下.)