我一直在尝试用 D3 创建一棵美丽的树。
对于节点，我在隐藏的 div 中有一个 SVG"template"。但我一直在尝试使用D3的许多功能来“克隆”"template"，但都没有运行。
最后的 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 的 <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 命名空间很重要。
更新:以下是上述方法的完整工作示例:
关于javascript - 如何克隆 dom 的元素或 block ？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17573896/