使用d3.js複製整個svg元素

我使用d3.js創建rectangle，在該矩形內創建10個較小的矩形。使用d3.js複製整個svg元素

我想在鼠標單擊時將整個事件複製到另一個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"); 

});

請告訴我在哪裏犯了錯......

來源

2013-10-25 Nikunj Aggarwal

你正在做代碼中的5個不同的事情。我建議你回到開始，並嘗試先追加一個矩形，然後追加一個矩形。 –

拉爾斯：我沒有得到你想說的是什麼...請更清楚地解釋... –

我不能完全肯定你試圖處理你發佈的代碼，但我認爲複製整個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);

見working fiddle here。請注意，這隻適用於SVG節點是其父節點的唯一子節點 - 否則，您可能需要以某種方式封裝它。

來源

2013-10-26 00:17:27 nrabinowitz

D3不提供克隆功能，可能是因爲DOM元素（包括SVG節點）上已存在的本地cloneNode方法。

此方法包含一個深層複製（即複製所有後代）的布爾參數，而不是僅克隆它所調用的節點。您可能想要執行類似bigRectContainer.node().cloneNode(true)的操作來複制矩形的整個DOM分支。

來源

2016-11-28 18:31:01 brichins

d3.select（bigRectContainer）.node（）。cloneNode（true）這對我有用。 –

使用d3.js複製整個svg元素

回答

相關問題