调用(this.dragger)不工作，d3拖动()

Question

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

，这是我的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');
}

我在.call(this.dragger)的closePolygon()函数中有问题。我一直在犯这个错误

g.selectAll(...).data(...).enter(...).append(...).attr(...).attr(...).attr(...).attr(...).attr(...).attr(...).style(...).call不是一个函数

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

谢谢。

Answer 1

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

然而，如何解决问题取决于问题到底是什么。

然而，以下是我为解决这一问题提出的一般性建议：

1. 首先，确保您精确地指出了问题
   1. 您正在循环中运行，因此请确保知道错误发生在哪个i上。
   2. 尝试将该调用链分解为单独的语句，并对console.log元素进行.call不是函数的处理。

​

1. .call很可能是按照Function.prototype.call实现来设计的。这告诉我们.call所针对的元素应该是function，因此它缩小了调用链的预期返回值。
2. 您非常信任这样一个事实，即this.points和每个[i]都是您期望的。我会对这个二维数组进行一点验证