CODEWITHSUNDEEP
javascriptjqueryd3.js
carlos a.
carlos a.

Reputation: 188

hide nodes and children in D3.js using JavaScript or jQuery

I´m forking an excellent force directed layout (@eyaler http://bl.ocks.org/eyaler/1058611) with multiple options, and I would like to hide a specific node with children using jQuery or D3+JavaScript, not directly from d3 code using the toggle function. (this is important because I have an external button in the html code)

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

I tried commands like:

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)});

It hides the node, but not the label and path. I also tried:

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

It hides all the other nodes.

UPDATE: I tried to use the solution here: A d3.select... equivalent to jQuery.children() given from @Klaujesi and it doesn't work for me. I'm also checked another post, How to display and hide links and nodes when clicking on a node in D3 Javascript and I can´t get good results with that approach either.

Check the image; it hides node g#Spathi but not the children and paths

enter image description here

Upvotes: 3

Views: 927

Answers (1)

Klaujesi
Klaujesi

Reputation: 1836

You has <tex> outside <g> element:

<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>

must be:

<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>

make <text>, <g> dependant

Upvotes: 2

Related Questions