d3將靜態工具提示鏈接到點

我正在嘗試創建散點圖並希望通過單擊每個點來顯示工具提示。只有當點被取消選中（再次點擊）時，工具提示纔會消失。目前，選定的點將與有黑色邊框。取消選擇的點與r=4.5沒有可見的黑色邊框。d3將靜態工具提示鏈接到點

使用下面的代碼，當我取消選擇點時，工具提示不會消失。如何將工具提示鏈接到每個點？謝謝！

.on("click", function (d) { 
    var clickTooltip = d3.select("#data_visualization").append("div").attr("class", "click_tooltip"); 
    if (d3.select(this).attr("r") < 8) { 
     d3.select(this) 
      .style("stroke", "black") 
      .style("stroke-width", "2px") 
      .style("stroke-opacity", 1) 
      .attr("r", 8); 

     clickTooltip.style("opacity", 0.62); 
     var clickTooltipText = "display"; 
     clickTooltip.html(clickTooltipText) 
       .style("left", (d3.event.pageX + 20) + "px") 
       .style("top", (d3.event.pageY - 40) + "px"); 
    } else { 
     d3.select(this) 
      .attr("r", 4.5) 
      .style("stroke-opacity", 0); 
     clickTooltip.style("opacity", 0); 
    } 
}

來源

2014-04-30 Boxuan

我想通了。我在這裏發佈我的答案，以防有人感興趣。這個想法是爲每個工具提示div添加一個ID。稍後我們可以使用JQuery通過ID刪除。

.on("click", function (d) { 
    var pointID = "point_" + d3.select(this).attr("cx").replace(".", "_") + "_" + d3.select(this).attr("cy").replace(".", "_"); 
    var clickTooltip = d3.select("#data_visualization") 
         .append("div") 
         .attr("id", pointID) 
         .attr("class", "click_tooltip"); 
    if (d3.select(this).attr("r") < 8) { 
     d3.select(this) 
      .style("stroke", "black") 
      .style("stroke-width", "2px") 
      .style("stroke-opacity", 1) 
      .attr("r", 8); 

     clickTooltip.style("opacity", 0.62); 
     var clickTooltipText = "display"; 
     clickTooltip.html(clickTooltipText) 
       .style("left", (d3.event.pageX + 20) + "px") 
       .style("top", (d3.event.pageY - 40) + "px"); 
    } else { 
     d3.select(this) 
      .attr("r", 4.5) 
      .style("stroke-opacity", 0); 
     d3.select("#" + pointID).remove(); 
    } 
}

來源

2014-04-30 21:29:27 Boxuan

每次調用點擊處理程序時，都會追加一個新元素。相反，創建元素一次，然後選擇它：

var clickTooltip = d3.select("#data_visualization").append("div").attr("class", "click_tooltip"); 

.on("click", function (d) { 
    if (d3.select(this).attr("r") < 8) { 
    // etc

來源

2014-04-30 20:32:00

感謝您的回答。不過，我在裏面創建了這個元素，因爲我希望能夠選擇多個點並顯示所選點的所有工具提示。當每個點被取消選中時，我希望相應的工具提示消失。如果我在外面創建元素，則先前所選點的工具提示將被替換。 – Boxuan

d3將靜態工具提示鏈接到點

回答

相關問題