javascript - 调用(this.dragger)不起作用，d3.drag()

Question

我正在将 d3.js 集成到我的 Angular 应用程序中。

这是我的 ngOnInit

ngOnInit() {

 this.dragger = d3.drag()
.on("drag", () => this.handleDrag())
.on("end", () => this.endDrag()); 


}

调用this.dragger的函数

closePolygon() {

this.floorOnly.select('g.drawPoly').remove();
var g = this.floorOnly.append('g');
 g.append('polygon')
.attr('points', this.points)
.style('fill', this.getRandomColor());   

for(var i = 0; i < this.points.length; i++) {   

    var circle = g.selectAll('circles')
    .data([this.points[i]])
    .enter()
    .append('circle')
    .attr('cx', this.points[i][0])
    .attr('cy', this.points[i][1])
    .attr('r', 4)
    .attr('fill', '#FDBC07')
    .attr('stroke', '#000')
    .attr('is-handle', 'true')
    .style({cursor: 'pointer'})
    .call(this.dragger);

    this.coorDinates.push([this.points[i][0], this.points[i][1]]);
  }
}

其他相关功能

 endDrag() {
    this.dragging = false;
 }

handleDrag() {
    console.log('entered handleDrag, will do dragging code here');
}

我在 closePolygon() 函数中的 .call(this.dragger) 中遇到问题。我不断收到此错误

g.selectAll(...).data(...).enter(...).append(...).attr(...).attr(...).attr(...).attr(...).attr(...).attr(...).style(...).call is not a function

以前当我使用d3.js版本3时，它工作正常，代码是d3.behavior.drag()，但是现在，当我更改为版本 4 且其新代码为 d3.drag() 时，我的代码不再工作。难道我叫错了？我尝试了很多不同的方法，但仍然没有运气。还是我错过了什么？

谢谢。

Answer 1

发生这种情况是因为您调用 .call 的元素是一个没有 call 属性的对象(或者它有它，但它不是一个函数)。

但是，如何解决取决于问题的实际情况。

但是，这些是我解决该问题的一般建议:

1. 首先，请确保查明问题
   1. 您正在循环中运行，因此请确保您知道错误发生在哪个i上
   2. 尝试将调用链分解为单独的语句，并且 console.log 上的 .call 元素不是函数
2. 很可能 .call 是按照 Function.prototype.call 来设计的。执行。这告诉我们 .call 所针对的元素应该是 function，因此它缩小了调用链的预期返回值的范围。
3. 您非常相信 this.points 和每个 [i] 都是您所期望的。我会验证一下二维数组