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

Question

我有这个结构，由 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。不知何故，删除类不起作用。固定类没有被移除:

$("#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)
});

它删除了 fixed 类。但不知何故 d3 对此不感兴趣。还是固定的=(

剩下的问题

我为剩下的问题创建了一个新问题:Removing fixed classes does not properly remove them from the presetation

Answer 1

jQuery addClass/removeClass/toggleClass 似乎不适用于 SVG 元素。有一个 ticket在 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)
});

希望这对您有所帮助。