Welchen Parameter benötigt d3.mouse()

Question

Ich versuche, Mauskoordinaten relativ zu einem group Element zu erhalten. Hier ist der Code:

var backRect = chart.append("g").attr("class", "rect"); 
var g = backRect.append('rect') 
     .style('stroke', 'none') 
     .style('fill', '#FFF') 
     .style('fill-opacity', 0) 
     .attr({ 
      width: width, 
      height: height, 
      'pointer-events': 'none', 
      'class': 'backRect' 
     }); 

// the code below is inside another container's event; but I want mouse coordinates relative to the above rect, hence can't use d3.mouse(this) 
// get mouse pointer location 
     var coordinates = [0, 0]; 
     coordinates = d3.mouse(backRect); // d3.select(".rect") does not work either 

aber die folgende Fehlermeldung erhalten:

d3.min.js:1 Uncaught TypeError: n.getBoundingClientRect is not a function

Nach dem d3 mouse docs d3.mouse() nimmt einen Behälter, der svg oder g Element sein kann.

Welchen Parameter sollte ich an d3.mouse() übergeben? Ich habe versucht d3.select(".rect"), die auch nicht funktioniert.

Answer 1

d3.mouse(backRect.node()) Verwendung hat den Trick.

Answer 2

Sie sollten d3.mouse() innerhalb eines Ereignisses verwenden, um die Werte relativ zum übergebenen Container abzurufen.

Überprüfen dieser Block

http://bl.ocks.org/hlucasfranca/f133da4493553963e710

svg.on("click", function() { 
      var coords = d3.mouse(this); 
      ........ 
      ........ 
})