我有这样的svg:
<svg id="mySvg">
<path></path>
<path></path>
<path></path>
</svg>
但是我想把这个svg中的所有路径都放在g标签中,这样看起来就像这样:
<svg id="mySvg">
<g>
<path></path>
<path></path>
<path></path>
</g>
</svg>
我该怎么做呢?
d3.select("#mySvg").append("g") // -> and move all paths inside g
2条答案
按热度按时间tzdcorbm1#
您可以使用
selection.remove()
移除元素。这个方法会传回已移除元素的选取范围。您也可以使用
selection.append()
来附加这些元素。然而,selection.append只接受一个函数或字符串。如果您提供了一个函数,它应该返回一个(单个)元素/节点。我们可以使用selection.node()
来访问一个元素的选择的元素/节点这给了我们一个模式:
第一个
然而,append()是针对单个元素的,如果你有很多元素,你可以使用
selection.each()
将每个选中的元素添加到父元素g
中:第一个
this
正确,这是我们要添加到父g的元素 *无论是否选择了一个或多个节点,第二个代码段都将工作。
7fyelxc52#
在过去的几年里,我提出了一些类似于Andrew Reid在他的回答中提出的one的方法:然而,深入研究这个问题,我发现了一个解决方案,它使用VanillaJS DOM方法,并在一个方法调用中完成整个过程。
Element
的API知道一些同时向DOM中添加多个元素的方法。element.append()
方法可以用来在一次运行中优雅而轻松地将path
元素附加到新组中。第一个