Javascript 使用d3.js复制整个svg元素

我正在使用

d3.js

创建一个

矩形

，在该矩形内我正在创建10个较小的矩形

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

jsfiddle

代码链接：

代码如下：

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

 });

var svgContainer=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，200）
.attr（“高度”，200）；
//画矩形
var rectangle=svgContainer.append（“rect”）
.attr（“x”，10）
.attr（“y”，10）
.attr（“填充”、“红色”）
.attr（“宽度”，200）
.attr（“高度”，200）；
var bigRectContainer=d3.select（“#bigRectContainer”）.append（'svg'））
.attr（'width'，200）
.attr（'height'，200）；
var-dim=20；
var x=0；
var y=0；
对于（i=1；i<11；i++）{
x=10+（i-1）*尺寸；
//警报（x）；
y=10；
svgContainer.append（“rect”）
.attr（“x”，x）
.attr（“y”，y）
.attr（“宽度”，20）
.attr（“高度”，20）
.样式（“填充”、“黑色”）；
}
var bigRectContainer=svgContainer.append（“g”）；
svgContainer.selectAll（“rect”）。在（“单击”上，函数（）{
var littleRect=d3.选择（此项）；
控制台日志（littleRect）
var bigRect=bigRectContainer.selectAll（“rect”）
.数据（littleRect）
.输入（）
.append（“rect”）；
});

---

请告诉我我是在哪里犯的错误…

我不完全确定您想用发布的代码做什么，但我认为复制整个SVG节点很有趣。事实证明，使用

选择#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节点是其父节点的唯一子节点的情况下有效，否则，您可能需要以某种方式将其包装。

D3不提供克隆功能，可能是因为DOM元素（包括SVG节点）上已经存在本机方法

---

此方法包括一个布尔参数，用于深度复制（即复制所有子体），而不只是克隆调用它的节点。您可能需要执行类似于

bigRectContainer.node（）.cloneNode（true）

的操作来复制矩形的整个DOM分支。

您的代码中有5种不同的操作。我建议你回到开头，试着先加一个长方形，然后再加几个。拉尔斯：我不明白你想说什么。。。请更清楚地解释一下…d3.select（bigRectContainer）.node（）.cloneNode（true）这对我很有效。