Karte Tooltips in der falschen Stelle

Question

Ich versuche Tooltips auf einer Karte aufzunehmen ich in D3 zu machen, zu imitieren diesen Code: http://bl.ocks.org/lhoworko/7753a11efc189a936371

Und hier ist die Karte Ich arbeite an: https://pantherfile.uwm.edu/schro333/public/2016_electoral_map/

Wie Sie hier sehen können, habe ich Tooltips arbeiten, und sie zeigen den richtigen Namen, wenn der Benutzer über einen Zustand schwebt, aber die Position relativ zum Cursor ist wirklich aus. Ich bin mir nicht sicher, warum das so ist.

Relevante Code:

 svgContainer.selectAll("pathCodes") 
      .data(json.features) 
      .enter() 
      .append("path") 
      .attr("id", 
       function(d){ 
        var stateNameId = d.properties.name.toString(); 
        stateNameId = stateNameId.replace(/\s+/g, ''); 
        return stateNameId; 
      }) // this function returns the name of the state with spaces stripped and assigns it to individual polygon as id 
      .attr("d", pathCodes) 
      .attr("stroke", "black") // state outline color 
      .attr("stroke-width", "1") // state outline width 
      .attr("class", "noparty") // default to no party 
      .style("fill", politicalParties[0].color) // default fill is that of no party 
      ///////////// 
      .on('mousemove', function(d) { 
       var mouse = d3.mouse(svgContainer.node()); 
       tooltip.classed('hidden', false) 
        .attr('style', 'left:' + (mouse[0]) + 
          'px; top:' + (mouse[1]) + 'px') 
        .html(d.properties.name); 
      }) 
      .on('mouseout', function() { 
       tooltip.classed('hidden', true); 
      }); 
      ///////////// 

Answer 1

Sie erhalten die falsche Position, da die X/Y-Position, die Sie mit der SVG basiert weg und nicht die tatsächliche Lage des SVG auf der Seite.

können Sie

var loc = document.getElementById("states-map").getBoundingClientRect(); 
console.log(loc.top); //add this to the top 

verwenden den Offset zu erhalten. Nicht sicher, wie die d3 es machen könnte.