使用JavaScript或jQuery隐藏D3.js中的节点和子节点

Question

我正在使用多个选项提供优秀的强制导向布局（@eyaler http://bl.ocks.org/eyaler/1058611），我想使用jQuery或D3 + JavaScript 隐藏特定节点的子节点，不是直接使用toggle函数从d3代码。 （这很重要，因为我在html代码中有一个外部按钮）

http://bl.ocks.org/carlos-andres/c3194c284763fde317b0

我尝试过如下命令：

d3.selectAll("g#Avenger").attr("visibility", "hidden");

d3.select("g#Spathi").selectAll("*").attr("visibility", "hidden");

d3.select("g#Spathi").selectAll(this.children).attr("visibility", "hidden");

d3.select("g#Spathi + g").each(function(d){ console.log(d)});

它隐藏节点，但不隐藏标签和路径。我也尝试过：

jQuery('g#Avenger').siblings().toggle();

它隐藏了所有其他节点。

更新：我尝试使用@Klaujesi提供的解决方案A d3.select... equivalent to jQuery.children()，但这对我不起作用。我还检查了另一篇文章How to display and hide links and nodes when clicking on a node in D3 Javascript，我也无法用这种方法取得好成绩。

检查图像;它隐藏节点g＃Spathi但不隐藏子节点和路径

Answer 1

您有<tex>个<g>元素：

<g id="Drone" class="node" ...
    <path d="M-8.378872.....city: 1;"></path>
</g>
<text dy=".35em" dx="9.45 .... city: 1;">&ensp;Drone</text>

必须是：

<g id="Drone" class="node" ...
    <path d="M-8.378872.....city: 1;"></path>
    <text dy=".35em" dx="9.45 .... city: 1;">&ensp;Drone</text>
</g>

制作<text>，<g>依赖