如何追溯地将一个/一个完全定义但自主的 GUI 元素附加到另一个（DOM 附加）元素

Question

我一直在尝试，逐步将一些非常好的但静态和非 d3 和弦名称转换为波形 code，用于 d3.js 可视化中的动态动画。

我现在已经达到了一个点，我有（特别是）两个完全定义的 GUI 元素，其中第一个（绘图）已经附加到 DOM：

var plot = plotframe
.append("svg")
.attr("whatever", ....

.. 以及使用以下curious 语法创建的第二个（路径，已定义但尚未DOM-unattach）：

var path = d3.select(document.createElementNS(d3.ns.prefix.svg, "svg:path"))
.attr("id", "path")
.attr("whatever", ....

在我进行更改之前（这些元素成为 d3 选择的主题），原始元素使用以下方法连接：

plot.appendChild(path);

但是，由于路径受制于一些可爱的波浪构建算法，打扰了会很可惜，我怎么能做一个纯粹的回顾附加（现在两个 d3 选择）路径阴谋？类似于 appendChild，但对 d3 友好.. d3.js 是否完全满足这一点？

我知道这类似于之前的 question，但那里提供的答案显然不是我想要的。

谢谢 暴徒

Answer 1

如果您的两个选择都包含一个元素，只需使用 selection.node() 提取子元素，然后将其附加到父元素。

您可以通过从父选择中提取节点并使用element.appendChild( node ) 来做到这一点，也可以使用selection.append( functionThatReturnsANode )。像这样：

var plot = plotframe
.append("svg")
.attr("whatever", ....

var path = d3.select(document.createElementNS(d3.ns.prefix.svg, "svg:path"))
.attr("id", "path")
.attr("whatever", ....

plot.append( function(){return path.node();} );

必须使用函数返回节点，不能直接将节点作为参数传递。此方法旨在处理包含许多元素的选择，因此您需要一种方法将每个元素传递给不同的节点以进行追加。