如何克隆一个元素或 dom 块？答案

【问题标题】：How do I clone an element or chunk of dom?如何克隆一个元素或 dom 块？
【发布时间】：2013-07-10 14:51:53
【问题描述】：

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

问候。

【问题讨论】：

见Node.cloneNode

标签： javascript dom svg tree d3.js

【解决方案1】：

如果您尝试预先定义一些形状，然后在图表中的不同位置重复使用它们，那么使用 svg 的 <defs> 和 <use> 将获得更好的结果。有关背景，请参阅this simple example。你可以像这样预先创建你的形状：

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

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

http://bl.ocks.org/explunit/5988971

【讨论】：

不是克隆，因为您无法使用“use”更改#layer1 中的元素