Javascript 如何克隆dom的元素或块？_Javascript_Dom_Svg_Tree_D3.js

Javascript 如何克隆dom的元素或块？

javascript dom svg tree d3.js

Javascript 如何克隆dom的元素或块？,javascript,dom,svg,tree,d3.js,Javascript,Dom,Svg,Tree,D3.js,我一直在尝试用D3创建一棵美丽的树对于节点，我在一个隐藏的div中有一个SVG模板。但我一直在尝试使用D3的许多功能来克隆模板，但都没有运行最后一个javascript代码是： ... var node = svg.selectAll("g.node") .data(nodes) .enter() .append("svg:g") .attr("transform",

我一直在尝试用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
...

注意。

如果您试图预先定义一些形状，然后在图中的不同位置重用它们，那么使用svg和将获得更好的结果。有关背景信息，请参阅。您可以这样在前面创建形状：

<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400">
 <defs>
   <g id="layer1" transform="translate(-208.375,-410.5)">
     <rect
     ...

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名称空间很重要

更新：以下是上述方法的完整工作示例：

<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400">
 <defs>
   <g id="layer1" transform="translate(-208.375,-410.5)">
     <rect
     ...

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名称空间很重要

更新：以下是上述方法的完整工作示例：

请参见“请勿查看克隆”，因为您无法使用use更改layer1中的元素。请勿查看克隆，因为您无法使用use更改layer1中的元素