Remove all .fixed classes from force layout nodes with jQuery

问题

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

<div id="familytreecontentsvg">
<g class="nodes">
    <g class="node" transform="translate(625.2095978696435,404.7159479251927)" style="border: 3px solid red;"></g>
    <g class="node" transform="translate(549.3595414086468,461.0475336079573)" style="border: 3px solid red;"></g>
    <g class="node fixed" transform="translate(617.2898371986196,498.8572888164544)" style="border: 3px solid red;"></g>
</g>

And finally I would like to remove the .fixed classes from all nodes.

So triggering this event I have a button. To check if it's working I just for demonstrating added some css which worked. Somehow the remove class is not working. The fixed class is not removed:

$("#familytreeUnfixallbutton").click(function() {
    $( "#familytreecontentsvg .node" ).css( "border", "3px solid red" );
    $( "#familytreecontentsvg .node" ).removeClass( "fixed" );
});

So How can I remove all fixed classes from the nodes?

Current state

This one is working now:

d3.select('#familytreeUnfixallbutton').on('click', function(){
    d3.selectAll('#familytreecontentsvg .node').classed('fixed', false)
});

It removes the fixed class. But somehow d3 is not interested about this. It is still fixed =(

Remaining question

I created a new question for the remaining issue: Removing fixed classes does not properly remove them from the presetation

回答1:

It seems that jQuery addClass/removeClass/toggleClass do not work with SVG elements. There is a ticket on jQuery but it is closed and it 'won't fixed'.

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.

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

回答3:

Please use the below code

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

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

来源：https://stackoverflow.com/questions/28669830/remove-all-fixed-classes-from-force-layout-nodes-with-jquery

标签

javascript

jquery

css

d3.js

force-layout