d3.js和TypeScript编译错误 [英] d3.js and TypeScript compilation error

问题描述

我正在研究示例强制拖动I 并能够将其获取到使用纯JavaScript.但是，尝试使用TypeScript时出现编译错误.

I'm working through the example Force Dragging I and have been able to get this to work with plain JavaScript. However, I have a compilation error when trying to use TypeScript.

问题代码(除去了多余的部分)是:

The problem code (with extraneous parts removed) is:

import * as d3 from "d3";

interface INode {
    id: string;
    group: number;
}

interface ILink {
    source: string;
    target: string;
    value: number;
}

interface IGraph {
    nodes: INode[];
    links: ILink[];
}

var svg = d3.select("svg");

d3.json("data/miserables.json", function (error, graph: IGraph) {

    var node = svg.append("g")
        .selectAll("circle")
        .data(graph.nodes) // Commenting this out, error goes away
        .enter().append("circle")
        .call(d3.drag() // Error here
            .on("start", dragstarted)
            .on("drag", dragged)
            .on("end", dragended));
});

.call(d3.drag()行引起以下tsc错误:

The .call(d3.drag() line is giving rise to the following tsc error:

App.tsx(31,15):错误TS2345:类型"DragBehavior"的参数无法分配给类型的参数 '(选择:Selection，... args:任意[]) =>无效". 参数选择"和选择"的类型不兼容. 类型选择"不能分配给类型选择". 类型"BaseType"不可分配给类型元素". 不能将"null"类型分配给"Element"类型.

App.tsx(31,15): 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 'null' is not assignable to type 'Element'.

类似于使用TypeScript拖放d3 v4 ，如果我更改代码以重新选择圈子，则没有错误:

Similar to d3 v4 drag and drop with TypeScript, there is no error if I change the code to reselect the circles:

var nodes =
  svg.append("g")
  .selectAll("circle")
  .data(graph.nodes)
  .enter().append("circle");

var circle = svg.selectAll("circle");
circle.call(d3.drag()
  .on("start", dragstarted)
  .on("drag", dragged)
  .on("end", dragended));

但是，当不使用类型时，这不是必需的.

However, when not using the types this is not necessary.

我试图在这里弄清楚如何使用TypeScript来定义具有适当类型的变量，或进行编译所需的任何条件.

I'm trying to work out how to work with TypeScript here in order to define variables with the appropriate types, or whatever is required to get it compiling.

推荐答案

序言:

D3模块的TypeScript定义在接口和方法中广泛使用泛型，最重要的是，泛型用于控制D3所操作的元素的类型以及绑定的数据的类型这些元素.

The TypeScript definitions for the D3 modules make extensive use of generics in interfaces and methods, most importantly the generics are used to control the type of element(s) D3 operates on, as well as the type of the data that are bound to those elements.

问题的核心:

(1)创建拖动行为时，请确保泛型与元素类型相对应，并且绑定数据类型与要拖动的元素相对应.在上述情况下，这应表示d3.drag<SVGCircleElement, INode>()

(1) When you create your drag behavior, ensure that the generics correspond to the element type and bound data type corresponding to the element to be dragged. In the above case, this should imply d3.drag<SVGCircleElement, INode>()

(2)确保拖动事件处理程序(dragstarted，dragged和dragended具有匹配的调用签名，例如function dragged(this: SVGCircleElement, d: INode) {...}(如果需要，您只需指定this -context类型)打算在回调中访问它.)

(2) Ensure the drag event handlers (dragstarted, dragged and dragended have a matching call signature, e.g. function dragged(this: SVGCircleElement, d: INode) {...} (You will only need to specify the this-context type, if you intend to access it in the callback.)

(3)确保向其应用拖动行为的选择具有相应的类型. Selection接口具有四个泛型，其中前两个泛型再次对应于所选元素的类型及其绑定数据的类型. Selection方法(例如select，selectAll，data和append)都具有与它们可能影响的事物"相对应的泛型.在data的情况下，TS可以根据传递到调用中的数据来推断泛型.对于其他提到的方法，您可能必须明确说明选择"或附加"的含义.对于上述情况，您可以考虑:

(3) Ensure the selection to which you apply the drag behavior has the corresponding type. The Selection interface has four generics, of which the first two again correspond to the type of the selected element and the type of its bound datum. Selection methods like select, selectAll, data and append all have generics corresponding to "things" they may impact. In the case of data, the generic may be inferred by TS based on the data that are passed into the call. In the case of the other mentioned methods, you may have to explicitly spell out, what it is that you are "selecting" or "appending". For the above, you could consider:

//...
.data<INode>(graph.nodes) // Commenting this out, error goes away
.enter()
.append<SVGCircleElement>("circle")
//...

以上更改应确保您的选择和拖动行为以类型安全的方式对齐.有关更多详细信息，您可以参考定义中的注释:

The above changes should ensure your selection and drag behavior are aligned in a type-safe manner. For more details you can refer to the comments in the definitions:

DragBehavior定义或相关定义测试此处. 选择定义. 由于所有这些TS定义都具有广泛的JSDoc注释，因此良好的IDE将具有悬停工具提示/预览，使您可以在编写时看到它们.请注意有关泛型的注释部分.希望这会有所帮助.

DragBehavior Definition or the related definition tests here. Selection Definition. Since all these TS definitions have extensive JSDoc comments, a good IDE will have hover tooltips/peeks allowing you to see them as you write. Look out for the part of comments referring to generics. Hope this helps.

这篇关于d3.js和TypeScript编译错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！