使用jQuery从强制布局节点中删除所有.fixed类

Remove all .fixed classes from force layout nodes with jQuery

本文关键字：删除 fixed 节点 jQuery 布局 使用      更新时间：2024-04-03

我有这个结构，由d3.js部队布局制成：

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

最后，我想从所有节点中删除.fixed类。

所以触发这个事件我有一个按钮。为了检查它是否有效，我只是为了演示添加了一些有效的css。不知怎的，remove类不起作用。固定类未删除：

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

那么，我如何从节点中删除所有固定类？

当前状态

这个正在工作：

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

它删除了固定的类。但不知何故，d3对此并不感兴趣。它仍然是固定的=（

剩余问题

我为剩下的问题创建了一个新问题：删除固定类并不能正确地将它们从预设中删除

jQuery addClass/removeClass/toggleClass似乎不适用于SVG元素。jQuery上有一个票证，但它已关闭并且"无法修复"。

你可以使用d3.selectAll('#familytreecontentsvg.node').classed('fixed', false)或旧的jQuery.attr。所以你的代码应该是这样的：

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

希望这能有所帮助。

"skay"说的是正确的，只要确保你选择了正确的东西，否则就不会起作用。在我看来，我会给节点ID，然后通过ID选择它们，然后删除你想要的类。

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

如果你想添加一个类，就简单地说：

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

请使用以下代码

$("#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" />

相关文章：