將工具提示添加到d3散點圖

Question

我已經得到了下面的散點圖d3.js http://gkalliatakis.github.io./ 現在我想每次鼠標在三角形上時添加tootltip時間（x軸的值）。我讀了很多例子： http://bl.ocks.org/weiglemc/6185069 但我無法修改他們爲我的項目。 有什麼想法？

Answer 1

我修改了您的代碼以合併示例鏈接中的工具提示。鍵是這樣的：

1）追加DIV提示到您的HTML身體（注，你的HTML格式不正確，它沒有身體，我說這些標籤）：

var tooltip = d3.select('body') 
     .append('div') 
     .attr('class', 'tooltip') 
     .style("opacity", 0); 

2）在你點鼠標懸停/鼠標移出更新div的html和顯示/隱藏工具提示：

svg.selectAll(".point") 
    .data(session_data) 
    .enter() 
    .append("path") 
    .on("mouseover", function(d, i) { // show it and update html 
    d3.select('.tooltip') 
    tooltip.transition() 
     .duration(200) 
     .style("opacity", .9); 
    tooltip.html(d.x) 
     .style("left", (d3.event.pageX + 5) + "px") 
     .style("top", (d3.event.pageY - 28) + "px"); 
    }) 
    .on("mouseout", function(d, i) { 
    tooltip.transition() 
     .duration(500) 
     .style("opacity", 0); 
    }) 
    .attr("class", "point") 
    ... 

工作實例here。