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);

获得以下结果：

结果我期待的是：

我的代码中是否有任何错误，或者我需要采取不同的方式。

Answer 1

您必须在鼠标悬停时更新工具提示div的位置。

.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);    
});