D3圖表：如何添加工具提示？

我想爲我的樹形圖中包含的所有節點添加工具提示。D3圖表：如何添加工具提示？

var tooltip = d3.select("body") 
     .append("div") 
     .style("position", "absolute") 
     .style("z-index", "10") 
     .style("visibility", "hidden") 
     .text("a simple tooltip");

並嘗試顯示一個工具提示框，當用戶mouseover（）它，但不起作用，並沒有例外。

我創建了一個示範基地對我的當前階段：http://jsfiddle.net/qvco2Ljy/119/

來源

2016-11-29 anson920520

檢查[這篇文章]（http://www.w3schools.com/css/css_tooltip.asp）。 –

我想我應該更好地使用d3 API的東西，而不是CSS？ – anson920520

取出return，並設置提示的x和y的位置：

tooltip.style("visibility", "visible") 
    .style('top', d3.event.pageY - 6 + 'px') 
    .style('left', d3.event.pageX + 10 + 'px');

別忘了讓它消失在mouseout：

tooltip.style("visibility", "hidden")

這是你更新的提琴：http://jsfiddle.net/dv8cn0xu/

來源

2016-11-29 02:30:22

基本上這些代碼在JSfiddle中工作，但不在我的代碼中。 – anson920520

您必須提供更多詳細信息：哪些方法無效？你在使用服務器嗎？你有任何控制檯消息？ –

我只需複製並粘貼而不需要修改。但它不工作，並沒有例外 – anson920520

您可以附加提示每個節點如下

node.append("svg:title") 
    .text(function (d) { 
     return "Some Text based on Data (d)"; 
    });

來源

2016-11-29 02:22:31

D3圖表：如何添加工具提示？

回答

相關問題