d3拖放v7总是抛出错误

Question

我正在尝试在d3强制布局中启用拖放功能，如下所示:

const nodeElements = svg.append("g")
.attr("class", "nodes")
.selectAll("circle")
.data(this.nodes)
.enter().append("circle")
.attr("r", 10)
.attr("fill", this.getNodeColor.bind(this))

const drag = d3.drag()
.on("start", this.dragStarted.bind(this))
.on("drag", this.dragged.bind(this) )
.on("end", this.dragended.bind(this));
nodeElements.call(drag);

但是我在页面中看到了这个错误:

TS2345:类型为"DragBehavior<Element,>"的参数不能赋值给类型为....的参数

我的d3版本是v7

所以，在d3 v7，什么是正确的方式来启用拖放?

感谢

Answer 1

我注意到的第一件事是事件侦听器通常应该是函数。因此，可以尝试

d3.drag()
.on("start", () => this.dragStarted.bind(this))

很难说，因为我们不知道dragStarted是什么样子的。

下面是一个非常简单的应用d3.drag移动圆圈的例子:

let w = 500
let h = 300
let svg = d3.select('#container')
.append('svg')
.attr('width', w)
.attr('height', h)

let c = svg.append('circle')
.attr('cx', w/2)
.attr('cy', h/2)
.attr('r', 8)
.attr('fill', 'black')

c.call(
d3.drag().on("drag", function (evt) {
c.attr("cx", evt.x).attr("cy", evt.y);
})
)

<script src="https://d3js.org/d3.v7.min.js"></script>
<div id="container"></div>