gpt4 book ai didi

javascript - 如何克隆元素或 dom block ?

转载 作者:行者123 更新时间:2023-11-29 18:22:03 24 4
gpt4 key购买 nike

我一直在尝试用 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 命名空间很重要。

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

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

关于javascript - 如何克隆元素或 dom block ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17573896/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com