Question

我一直在努力用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
...

问候。

Answer 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

如何克隆dom的元素或块？

1 个答案: