javascript - 复制并插入 d3 选择

Question

在 d3 程序中，我需要获取一个节点(使用 d3.selection)，然后我想插入同一个 svg。

我知道有一些函数，比如追加和插入，但这些函数是针对新元素的。

var node = d3.select("rect#someId"); //node with some attributes and listeners

现在我的 var 节点有以下属性:{_groups, _parents}

var anotherNode = d3.select("anotherNode").insert(node); //It work but it would be great a similar function or a workaround

注意。我需要保留节点的监听器

Answer 1

新答案

引入了 D3 v5.0 selection.clone ，其中:

Inserts clones of the selected elements immediately following the selected elements and returns a selection of the newly added clones.

这是一个演示:

var copy = d3.select("#group").clone(true).attr("transform", "translate(120,100)");

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width="200" height="200">
	<g id="group">
		<rect x="10" y="10" width="50" height="20" fill="teal"></rect>
		<circle cx="35" cy="40" r="20" fill="red"></circle>
	</g>
</svg>

请注意，正如原始答案中的解决方案一样，selection.clone 不会克隆监听器。

---

原始答案

使用此功能克隆您的选择:

function clone(selector) {
    var node = d3.select(selector).node();
    return d3.select(node.parentNode.insertBefore(node.cloneNode(true), node.nextSibling));
}

然后，您可以使用 clone("#foo")(按 ID)或 clone(".foo")(按类)调用它。

这是一个示例，其中克隆了 ID 为“group”的组(一个矩形和一个圆圈)(翻译只是为了更好地查看克隆):

function clone(selector) {
    var node = d3.select(selector).node();
    return d3.select(node.parentNode.insertBefore(node.cloneNode(true),
node.nextSibling));
}

var copy = clone("#group").attr("transform", "translate(120,100)");

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg width="200" height="200">
	<g id="group">
		<rect x="10" y="10" width="50" height="20" fill="teal"></rect>
		<circle cx="35" cy="40" r="20" fill="red"></circle>
	</g>
</svg>

PS:这不会克隆监听器。还有，这个函数不是我的，是Bostock写的。