d3 v4使用TypeScript进行拖放 [英] d3 v4 drag and drop with TypeScript

问题描述

我正在使用D3库v4和Angular2，我想要拖放一些svg元素。我有一个代码：

  item.call（
 d3.drag（）
 .on（开始，dragStarted）
 .on（drag，dragged）
 .on（end，dragEnded）
）; 
  

和

  function dragStarted（d）{
 d3.select（this）.raise（）。classed（active，true）; 
} 
 
函数dragged（d）{
 d3.select（this）.attr（cx，dx = d3.event.x）.attr（cy ，dy = d3.event.y）; 
} 
 
函数dragEnded（d）{
 d3.select（this）.classed（active，false）; 
} 
  

我收到此错误：

TS2345：DragBehavior类型的参数不能分配给类型为'（selection：Selection，... args：any []）=> void'的参数。
参数选择和选择的类型不兼容。
键入选择不能分配以输入选择。
键入'BaseType'不能分配类型'Element'。
键入'EnterElement'不能分配类型'Element'。
类型'EnterElement'中缺少属性'classList'。

任何想法？

解决方案

请参阅我的答案以回应类似的SO问题的帖子这里。

它解释了确保拖动行为及其操作选择具有兼容的底层元素类型和绑定数据类型的需要和方法。 >

根据您的情况，根据您的具体情况，将解决此问题。

I am using the D3 library v4 and Angular2 and I want to make a drag and drop of svg elements. I have a code:

item.call(
    d3.drag()
      .on("start", dragStarted)
      .on("drag", dragged)
      .on("end", dragEnded)
  );

and

function  dragStarted(d) {
    d3.select(this).raise().classed("active", true);
}

function  dragged(d) {
    d3.select(this).attr("cx", d.x = d3.event.x).attr("cy", d.y = d3.event.y);
}

function  dragEnded(d) {
    d3.select(this).classed("active", false);
}

I get this error:

TS2345: Argument of type 'DragBehavior' is not assignable to parameter of type '(selection: Selection, ...args: any[]) => void'. Types of parameters 'selection' and 'selection' are incompatible. Type 'Selection' is not assignable to type 'Selection'. Type 'BaseType' is not assignable to type 'Element'. Type 'EnterElement' is not assignable to type 'Element'. Property 'classList' is missing in type 'EnterElement'.

Any ideas?

解决方案

Please see my answer in response to a similar SO issue post here.

It explains the need for and approach to ensuring that the drag behavior and the selection it operates on have compatible underlying element types and bound data types.

Following the steps outlined there, adapted to your situation, will address the issue.

这篇关于d3 v4使用TypeScript进行拖放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！