D3.js d3 v4使用TypeScript拖放
我正在使用D3库v4和Angular2,我想拖放svg元素。我有一个密码:D3.js d3 v4使用TypeScript拖放,d3.js,drag-and-drop,D3.js,Drag And Drop,我正在使用D3库v4和Angular2,我想拖放svg元素。我有一个密码: item.call( d3.drag() .on("start", dragStarted) .on("drag", dragged) .on("end", dragEnded) ); 及 我得到这个错误: TS2345:类型为“DragBehavior”的参数不能分配给类型为“(选择:选择,…参数:任意[])=>void”的参数。 参数“selection”和“sele
item.call(
d3.drag()
.on("start", dragStarted)
.on("drag", dragged)
.on("end", dragEnded)
);
及
我得到这个错误:
TS2345:类型为“DragBehavior”的参数不能分配给类型为“(选择:选择,…参数:任意[])=>void”的参数。
参数“selection”和“selection”的类型不兼容。
类型“Selection”不可分配给类型“Selection”。
类型“BaseType”不可分配给类型“Element”。
类型“EnterElement”不可分配给类型“Element”。
类型“EnterElement”中缺少属性“classList”
有什么想法吗?我试图使用来自的代码,但它显示了相同的错误。
我用另一种方式写:
svg.selectAll("circle")
.data(circles)
.enter().append("circle")
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
.attr("r", radius)
.style("fill", 'blue');
svg.selectAll("circle").call(d3.drag().on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended));
这对我很有用。请看我对类似SO问题帖子的回复 它解释了确保拖动行为及其操作的选择具有兼容的基础元素类型和绑定数据类型的必要性和方法
按照此处概述的步骤,根据您的情况进行调整,将解决这个问题。我仍然不确定什么是最正确的方法,既可以避免编译错误,也可以避免伪造类型系统。。。但它似乎以以下方式起作用:
this.svgGraph
.append('line')
.call(d3.drag<SVGLineElement, unknown>()
.on('drag', this.dragged())
);
this.svgGraph
.append('行')
.call(d3.drag()
.on('drag',this.draugd())
);
所以“强制”类型SVGLineElement
你觉得怎么样?我认为它是有效的,因为svg.selectAll('circle')返回一种d3.Selection类型。drag函数被定义为drag():因此BaseType在某种程度上与元素兼容
this.svgGraph
.append('line')
.call(d3.drag<SVGLineElement, unknown>()
.on('drag', this.dragged())
);