通過點擊/懸停節點顯示名稱？（D3.js版本4）

目前我有我的節點名稱顯示。如果用戶點擊節點或將鼠標懸停在節點上（我會喜歡測試後決定），我想我只想要顯示節點的名稱。通過點擊/懸停節點顯示名稱？（D3.js版本4）

要顯示的文字我有這個目前：

var nodes_text = svg.selectAll(".nodetext") 
     .data(nodes) 
     .enter() 
     .append("text") 
     .attr("class", "nodetext slds-text-heading--label") 
     .attr("text-anchor", "middle") 
     .attr("dx", -20) 
     .attr("dy", 20) 
     .text(function(d) { 
      return d.name; 
     });

我最初的想法是要刪除的最後一條語句在上面的代碼，並將其移動到「點擊」事件......

svg.select("circle").on("click", function(d) { 
svg.select(".nodetext").text(function(d) { 
      return d.name; 
     }); 

});

但是，只有當我由於某種原因點擊我的中央節點時纔有效。想知道是否有更明顯的方法。我的節點數據存儲在一個名爲「節點」的數組中。

編輯：這裏是顯示基本問題的一些測試數據的JFiddle。點擊紫色節點工作，但既然你有文本兩種不同的選擇和圓（不帶這些元素組，這是傳統的做法）別人不 https://jsfiddle.net/mg8b46aj/1/

來源

2017-06-04 Eango

你總是選擇的第一個元素都過濾他們。如果你需要幫助，你必須提供圓圈代碼和數據數組的樣本。最好是，如果你希望得到更快的幫助，可以創建一個jsfiddle/plunker/codepen/blocks/whatever。同時，我正在投票結束這個問題：*「尋求調試幫助的問題必須包含所需的行爲，特定的問題或錯誤以及在問題本身中重現問題所需的最短代碼。「* –

我可以提供jfiddle我想如果它允許我編輯問題。說盡可能短的代碼，所以不想提供整個程序，我想我會盡量簡化它。 – Eango

好，我只是撤回了我的投票。 –

你必須在代碼中幾個問題

您具有約束力的node-circles和node-text元素相同的數據，所以它是有道理的，如果你組逐一g元素
您正在嘗試處理單擊只有一個元素
svg.select("circle").on("click",handler)

這個事件裏面選擇和處理事件只有最後一個元素，你必須使用selectAll - svg.selectAll("circle").on("click",handler)
同樣的事情內部處理函數
svg.select(".nodetext").text(function(d) { return d.name; });
你也選擇在這裏最後一個元素
而不是在點擊設置text屬性，它的更好，如果你之前設置過，只需display & hide它hover & click

如赫拉爾多所提到的，你必須篩選節點基於圓點擊，但如果兩個節點具有相同的名稱？我也產生id爲節點，並使用該ID

查看更新fiddle

來源

2017-06-04 07:09:50 bumbeishvili

，一個可能的解決方案是過濾基於文本點擊的圓圈：

svg.selectAll("circle").on("click", function(d) { 
    svg.selectAll(".nodetext").filter(function (e){ 
     return e.name === d.name}) 
    .text(function(d) { 
     return d.name; 
    });

這裏是更新小提琴：https://jsfiddle.net/2L9rzqbs/

來源

2017-06-04 06:42:35

通過點擊/懸停節點顯示名稱？ （D3.js版本4）

回答

相關問題

通過點擊/懸停節點顯示名稱？（D3.js版本4）