Question

在d3程序中，我需要获取一个节点（带有d3.selection）然后我想插入相同的svg。

我知道有一些函数，如append和insert，但这些函数适用于新元素。

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，其中：

在所选元素后面紧跟插入所选元素的克隆，并返回新添加克隆的选择。

这是一个演示：

＆＃13;

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

＆＃13;

<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>

＆＃13;

请注意，正如原始答案中的解决方案一样，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＆＃34; group＆＃34;克隆（翻译只是为了更好地看到克隆）：

＆＃13;

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)");

＆＃13;

<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>

＆＃13;

PS：这不会克隆听众。此外，这个功能不是我的，它是由博斯托克写的。

在d3选择中复制和插入

1 个答案:

新答案

原始答案