2

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

问候。

4

1 回答 1

4

如果您尝试预先定义一些形状，然后在图表中的不同位置重复使用它们，那么使用 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 命名空间很重要。

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

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

于 2013-07-10T18:10:13.217 回答