d3.js 如何使用d3将一些标签移动到另一个标签内?

0x6upsns  于 2022-11-12  发布在  其他
关注(0)|答案(2)|浏览(195)

我有这样的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
tzdcorbm

tzdcorbm1#

您可以使用selection.remove()移除元素。这个方法会传回已移除元素的选取范围。
您也可以使用selection.append()来附加这些元素。然而,selection.append只接受一个函数或字符串。如果您提供了一个函数,它应该返回一个(单个)元素/节点。我们可以使用selection.node()来访问一个元素的选择的元素/节点
这给了我们一个模式:
第一个
然而,append()是针对单个元素的,如果你有很多元素,你可以使用selection.each()将每个选中的元素添加到父元素g中:
第一个

  • 使用function()和粗箭头表示法是为了确保this正确,这是我们要添加到父g的元素 *

无论是否选择了一个或多个节点,第二个代码段都将工作。

7fyelxc5

7fyelxc52#

在过去的几年里,我提出了一些类似于Andrew Reid在他的回答中提出的one的方法:然而,深入研究这个问题,我发现了一个解决方案,它使用VanillaJS DOM方法,并在一个方法调用中完成整个过程。
Element的API知道一些同时向DOM中添加多个元素的方法。element.append()方法可以用来在一次运行中优雅而轻松地将path元素附加到新组中。
第一个

相关问题