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 '['. 我已经查看了这里：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());