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

d3.js - 未捕获TypeError：对象[object Object]没有方法'getBoundingClientRect'

2 个答案: