Добавление всплывающей подсказки в графе javascript

Question

Мне очень нужна помощь! Please .. Мне нужно добавить подсказку к этому графику: http://jsfiddle.net/dvqFj/1/ Любая идея, как я могу это сделать? Или вы знаете, любой подобный пример в D3.js я попытался следующие без никакого Sucess:

div.tooltip { 
    position: absolute; 
    text-align: center; 
    width: 60px; 
    height: 12px; 
    padding: 8px; 
    font: 10px sans-serif; 
    background: #ddd; 
    border: solid 1px #aaa; 
    border-radius: 8px; 
    pointer-events: none; 
} 


    var div = d3.select("body").append("div") 
    .attr("class", "tooltip") 
    .style("opacity", 1e-6) 

function mouseover() { 
    div.transition() 
     .duration(500) 
     .style("opacity", 1); 
} 

function mousemove() { 
    div 
     .text(d3.event.pageX + ", " + d3.event.pageY) 
     .style("left", (d3.event.pageX - 34) + "px") 
     .style("top", (d3.event.pageY - 12) + "px"); 
} 

function mouseout() { 
    div.transition() 
     .duration(500) 
     .style("opacity", 1e-6); 
} 

Answer 1

Это не ясно из вашего вопроса, является ли это вариант для вас, но одна возможность заключается в том, чтобы использовать название элемент, а не реализовать свою собственную всплывающую подсказку. Это имеет то преимущество, что является стандартным и простым, за счет уменьшения возможной настройки.

http://jsfiddle.net/ezUex/

browser.append("path") 
    .attr("class", "area") 
    .attr("d", function (d) { 
     return area(d.values); 
    }) 
    .style("fill", function (d) { 
     return color(d.name); 
    }) 
    .append("title").text(function(d){ return d.name; }); 

Answer 2

Вы чуть было не это! В mouseover функции просто нужно быть привязаны к элементам пути:

browser.append("path") 
    .attr("class", "area") 
    .attr("d", function (d) { return area(d.values); }) 
    .style("fill", function (d) { return color(d.name); }) 
    .on("mouseover", mouseover) 
    .on("mousemove", mousemove) 
    .on("mouseout", mouseout); 

http://jsfiddle.net/dvqFj/5/