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

它刪除了固定類。 但不知何故 d3 對此不感興趣。 它仍然是固定的=（

剩余問題

我為剩余的問題創建了一個新問題： 刪除固定類不會從預設中正確刪除它們

Answer 1

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

希望這可以幫助。

Answer 2

'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

Answer 3

請使用以下代碼

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