javascript - d3.js - 未捕获的类型错误 : Object [object Object] has no method '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] 没有方法 'getBoundingClientRect'

放在那里

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

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