如何克隆dom的一部分或一部分？
[英]How do I clone an element or chunk of dom?
問題描述
我一直在嘗試用D3創建一棵美麗的樹。
對於節點，我在隱藏的div中有一個SVG“模板”。 但是我一直在嘗試使用D3的許多功能來“克隆”“模板”，但是所有功能都沒有運行。
最后一個JavaScript代碼是：
...
var node = svg.selectAll("g.node")
.data(nodes)
.enter()
.append("svg:g")
.attr("transform",
function(d)
{
return "translate(" + d.y + "," + d.x + ")";
}
);
var template_box = d3.select("#layer1");
console.log(template_box);
node.insert(template_box);
...
和HTML的查克是：
...
<body>
<svg width="400" height="400">
<g
id="layer1"
transform="translate(-208.375,-410.5)">
<rect
...
問候。
1 個解決方案
解決方案1
4 2013-07-10 18:10:13
如果您試圖先定義一些形狀，然后在圖中的不同位置重復使用它們，那么使用svg的<defs>和<use>將會獲得更好的結果。 有關背景，請參見此簡單示例 。 您可以像這樣預先創建形狀：
<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400">
<defs>
<g id="layer1" transform="translate(-208.375,-410.5)">
<rect
...
然后，您無需嘗試克隆<g>的內容 ，而只需引用它的定義即可 。 因此，您的代碼將如下所示：
var node = svg.selectAll("g.node")
.data(nodes)
.enter()
.append("g")
.attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; } )
node.append("use")
.attr("xlink:href","#layer1")
請注意，svg定義中的xlink命名空間很重要。
更新：這是上述方法的完整工作示例：
如何將XML DOM元素轉換為HTML DOM元素？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.