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');
}

我在 closePolygon（）函数中的 .call（this.dragger） 中遇到问题。我一直收到这个错误

g.selectAll（...）。数据（...）。输入（...）。追加（...）。ATTR（...）。ATTR（...）。ATTR（。 ..）。ATTR（...）。ATTR（...）。ATTR（...）。样式（...）。电话不是一个功能

之前当我使用 d3.js版本3 时，它运行正常，代码是 d3.behavior.drag（） ，但是现在当我更改为版本4 ，并且新代码为 d3.drag（） 时，我的代码不再有效了。我错误地打电话了吗？我尝试了很多不同的方法，但仍然没有运气。或者我错过了什么？

谢谢。

Answer 1

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

但是，如何修复取决于问题的真正原因。

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

首先，请确保您查明问题
1. 您正在循环中运行，因此请确保您知道发生错误的i
2. 尝试将该调用链分解为单独的语句，console.log .call不是函数的元素
根据Function.prototype.call实施，.call很可能是有意的。这告诉我们.call定位的元素应该是function，因此它缩小了调用链的预期返回值。
您非常信任this.points和每个[i]是您所期望的事实。我稍微验证了二维数组

call（this.dragger）不起作用，d3.drag（）

1 个答案: