使用d3.js复制整个SVG元素

Question

我正在使用d3.js创建一个矩形，在这个矩形内部我创建了10个小矩形。

我想在鼠标单击时将整个内容复制到另一个SVG元素中。

jsfiddle代码链接：http://jsfiddle.net/nikunj2512/XK585/

以下是代码：

var svgContainer = d3.select("body").append("svg")
.attr("width", 200)
.attr("height", 200);

//Draw the Rectangle
var rectangle = svgContainer.append("rect")
.attr("x", 10)
.attr("y", 10)
.attr("fill", "red")
.attr("width", 200)
.attr("height", 200);

var bigRectContainer = d3.select('#bigRectContainer').append('svg')
    .attr('width', 200)
    .attr('height', 200);
var dim = 20;
var x = 0;
var y = 0;
for (i = 1; i < 11; i++) {

    x = 10 + (i-1)*dim;
    //alert(x);
y = 10;

    svgContainer.append("rect")
        .attr("x", x)
        .attr("y", y)
        .attr("width", 20)
        .attr("height", 20)
        .style("fill", "black");
 }

 var bigRectContainer = svgContainer.append("g");
 svgContainer.selectAll("rect").on("click", function () {
 var littleRect = d3.select(this);
console.log(littleRect)

var bigRect = bigRectContainer.selectAll("rect")
                       .data(littleRect)
                       .enter()
                       .append("rect");

 });

请告诉我我的错误出在哪里...

- Nikunj Aggarwal

---

你的代码中涉及到5个不同的操作。我建议你回到开始，首先尝试添加一个矩形，然后再添加其他的。 - Lars Kotthoff

Lars：我不明白你想说什么...请更清楚地解释一下... - Nikunj Aggarwal

Answer 1

我不完全确定你想要做什么，但我觉得复制整个SVG节点很有趣。事实证明用 selection#html 很容易做到 - 这在SVG节点上不起作用，但它在其容器上是有效的，因此可以轻松克隆整个节点：

function addAnother() {
    var content = d3.select(this.parentNode).html();
    var div = d3.select('body').append('div')
        .html(content);
    div.selectAll('svg').on('click', addAnother);
}

svg.on('click', addAnother);

查看这里的工作嵌入。请注意，这仅适用于SVG节点是其父级的唯一子项的情况-否则，您可能需要以某种方式将其包装。

- nrabinowitz

Answer 2

D3没有提供克隆功能，可能是因为DOM元素（包括SVG节点）上已经存在原生的cloneNode方法。

该方法包含一个布尔参数来深度复制（即复制所有后代），而不仅仅是克隆它被调用的节点。您可能想要执行类似于bigRectContainer.node().cloneNode(true)的操作来复制整个矩形的DOM分支。

- brichins

---

d3.select(bigRectContainer).node().cloneNode(true) 这对我有用。 - shyam_