在D3強制佈局中使用數據（...）來更新圖形

Question

我正在使用D3強制佈局並添加代碼以允許用戶選擇單個節點（此處，選擇與D3 select（）無關，但指示從用戶的角度來看節點的突出狀態）。一次只能選擇一個節點。所以，當用戶點擊未選擇的節點時，我想取消選擇任何選定的節點。

我在節點上使用了一個選定的屬性，並努力使用D3數據（...）或數據（...）方法來設置該屬性。事實上，我無法像那樣工作。我現在所擁有的東西似乎有點不合時宜，所以我希望有一種更清潔的方式。

function deselectAll() { 
    var sc = d3.selectAll("circle") 
     .filter(function(d) {return (d.selected == "y")}); 

    var circles = sc.data(); 

    sc.transition() 
     .duration(50) 
     .style("stroke-width", "1px") 
     .style("stroke", "#3182bd"); 

    if(null != circles && circles.length > 0) { 
     for(i=0; i<circles.length; i++) { 
      circles[i].selected = "n"; 
     } 
    } 
} 

問題是，向鏈中添加.data（「n」）沒有將「selected」設置爲「n」。是否有可能將其作爲d3鏈的一部分？

Answer 1

d3中的許多選擇（或轉換）函數將每個節點的當前數據傳遞給您定義的函數。您可以隨時修改此數據的內容。

使用你的例子，如果你想設置有從「Y」 d.selected == "y"節點爲「n」您可以使用您篩選的選擇是這樣的：

sc.each(function(d) { 
    d.selected = "n"; 
}); 

此功能將一次爲每個被調用節點（每個節點具有根據您的過濾器選擇的「y」），以便您可以簡單地更改基準面上的屬性值。