подсказки в d3 JS (Пули диаграммы)

Question

d3.json("data.json", function(error, data) { 
    if (error) throw error; 
var div = d3.select("body").append("div") 
    .attr("class", "tooltip")    
    .style("opacity", 0); 
    var svg = d3.select("body").selectAll("svg") 
     .data(data) 
    .enter().append("svg") 
     .attr("class", "bullet") 
     .attr("width", width + margin.left + margin.right) 
     .attr("height", height + margin.top + margin.bottom).on("mouseover", function(d) {   
      div.transition()   
       .duration(200)  
       .style("opacity", .9);  
      div.html("Tooltip" + "<br/>" + d.measures);  
      }) 
    .append("g") 
     .attr("transform", "translate(" + margin.left + "," + margin.top + ")") 
     .call(chart); 

Getting ниже результата:

результата того, что я ожидал:

Есть ли ошибка в моем коде или мне нужно сделать что-то иначе.

Answer 1

Вам нужно будет обновить положение подсказки инструмента на мыши.

.on("mouseover", function(d) {   
     div.transition()   
     .duration(200)  
     .style("opacity", .9) 
     .style("left", (d3.event.pageX) + "px") //Set X 
     .style("top", (d3.event.pageY) + "px"); //Set Y 
     div.html("Tooltip" + "<br/>" + d.measures);  
});