d3.mouse（）需要什麼參數

Question

我正在嘗試獲取相對於group元素的鼠標座標。下面的代碼：

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 

但出現以下錯誤：

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

按照D3 mouse文檔d3.mouse()需要可以是svg或g元素的容器。

我應該將哪個參數傳遞給d3.mouse()？我試過d3.select(".rect")，這也不起作用。

Answer 1

使用d3.mouse(backRect.node())的伎倆。

Answer 2

您應該在事件中使用d3.mouse（）以獲取相對於傳遞容器的值。

檢查此塊

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

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