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

Question

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

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

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

..和第二个（路径，已定义但尚未DOM断开连接 ），使用以下奇怪的语法创建：

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完全可以满足此要求吗？

我知道这很像以前的问题 ，但是提供的答案显然不是我想要的。

谢谢暴徒

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();} );

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