d3.js - 遗漏的类型错误：对象的翻译：有没有方法“getBoundingClientRect”

Question

详情请见：jsfiddle

上的jsfiddle表工作正常。点击时我可以在图表上绘制一个点。 但是，当我已将此代码集成到backbone中并使用grunt构建时，它给我提供了错误Uncaught TypeError: Object [object Object] has no method 'getBoundingClientRect'。

请找click事件的代码如下：

// Ignore the click event if it was suppressed 
       if (d3.event.defaultPrevented) { return; }    
      var myElem = this.$('#point');    
      if (myElem == null) 
       { 
       // Extract the click location\  
       var point = d3.mouse(d3.select("g")), p = {x: point[0], y: point[1] };    
       // Append a new point 
       this.svg.append("circle") 
        .attr("transform", "translate(" + p.x + "," + p.y + ")") 
        .attr("r", "5") 
        .attr("class", "dot") 
        .attr("id", "point") 
        .style("cursor", "pointer") 
        .call(this.drag); 
       } 

为什么上运行的jsfiddle罚款，并给出本地机器上的错误????

如何解决此问题???

Answer 1

您更改了jsfiddle示例中的代码。您的jsfiddle包含：

var point = d3.mouse(this), 
     p = { x: point[0], y: point[1] }; 

这里显示的代码是不同的：

var point = d3.mouse(d3.select("g")), 
     p = { x: point[0], y: point[1] }; 

这是生产线的错误：

Uncaught TypeError: Object [object Array] has no method 'getBoundingClientRect'

放在那里

console.log(this); 
    console.log(d3.select("g")); 

，您将在控制台中看到两个完全不同的对象。

Answer 2

d3.mouse需要一个DOM元素，而不是d3选择。试试这个：

var point = d3.mouse(d3.select('g').node());