D3.js羣集翻轉 - 如何選擇和更改另一個元素

Question

我是D3.js的新手，已經改變了現有的一組代碼以正確顯示圓形羣集。我在標題和鏈接線之間的另一個圓圈中添加了「rect」項目。我的問題是如何在滾動標題時將相應的'rect'項設置爲'on'類。在以下鏈接的示例中，如果我翻轉「示例項目1」，我希望鄰居矩形框將不透明度更改爲1和/或更改顏色。同樣，如果我翻轉矩形框，我希望它的標題改變樣式（不透明度和/或顏色）。這麼近卻又是那麼遠......

http://www.itq9.co.uk/d3/sample1

我的想法是，我需要添加正確的選擇的mouseoverd功能：

function mouseovered(d) { 
    node 
    .each(function(n) { n.target = n.source = false; }); 

link 
    .classed("link--target", function(l) { if (l.target === d) return l.source.source = true; }) 
    .classed("link--source", function(l) { if (l.source === d) return l.target.target = true; }) 
    .filter(function(l) { return l.target === d || l.source === d; }) 
    .each(function() { this.parentNode.appendChild(this); }); 

node 
    .classed("node--target", function(n) { return n.target; }) 
    .classed("node--source", function(n) { return n.source; }); 

rect 
    .classed("rect--target", function(r) { return r.target; }) 
    .classed("node--source", function(r) { return r.source; }); 

} 

Answer 1

在你的情況，你需要的鼠標懸停處理程序僅適用於標題元素，而不是矩形 - 當鼠標懸停標題而不是矩形時，您希望發生某種情況。爲此，您必須選擇與標題相對應的rect並進行更改。這樣做的一種方法是爲rect元素設置ID，使其可以直接從綁定到標題的數據中識別。你沒有這樣做，所以你可以使用D3的數據匹配和過濾來識別元素：

function mouseovered(d) { 
    rect 
.data(nodes.filter(function(n) { return !n.children; })) 
    .filter(function(e) { return e == d; }) 
    // the selection will contain the corresponding rect element after this 
    .attr("fill", ...); 
}