Remove All .fixed Classes From Force Layout Nodes With Jquery

I have this structure, made by the d3.js force layout:

You can use d3.selectAll('#familytreecontentsvg.node').classed('fixed', false) or the good old jQuery.attr. So your code should be like this:

$("#familytreeUnfixallbutton").click(function() {
    $( "#familytreecontentsvg .node" ).css( "border", "3px solid red" );
    d3.selectAll('#familytreecontentsvg.node').classed('fixed', false)
});

Hope this helps.

Solution 2:

What 'skay' said is correct, just make sure you're selecting the correct thing otherwise it won't work. In my opinion I'd give the nodes ID's and select them by ID then remove the class you want.

nodes.attr("id", function(d,i){ return"nodes" + i;}); //unique ID//or
nodes.attr("id", "nodes"); //same ID//selecting using the second way of adding ID
    d3.select("#nodes").classed("fixed", false); //remove fixed class

If you wish to add a class, just as simple :

d3.select("#nodes").classed("fixed", true); //add fixed class

Solution 3:

Please use the below code

$("#familytreeUnfixallbutton").click(function() {
    $( "#familytreecontentsvg .node" ).each(function(){
       $(this).removeClass("fixed");
     });
  });

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="familytreecontentsvg"><gclass="nodes"><gclass="node"transform="translate(625.2095978696435,404.7159479251927)"style="border: 3px solid red;"></g><gclass="node"transform="translate(549.3595414086468,461.0475336079573)"style="border: 3px solid red;"></g><gclass="node fixed"transform="translate(617.2898371986196,498.8572888164544)"style="border: 3px solid red;"></g></g><inputid="familytreeUnfixallbutton"value="Test Button"type="button"style="float:right; margin-right:100px;"Text="Test Button" />

Share