d3.js和TypeScript编译错误

Question

我正在通过示例Force Dragging I进行操作,并且能够使用纯JavaScript进行此操作.但是,尝试使用TypeScript时出现编译错误.

问题代码(删除了无关的部分)是:

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错误:

App.tsx(31,15):错误TS2345:类型'DragBehavior'的参数不能分配给类型'的参数(选择:选择,... args:any [])=> void'.参数'选择'和'选择'的类型是不兼容的."选择"类型不能分配给"选择"类型.类型'BaseType'不能分配给'Element'类型.类型'null'不能分配给'Element'类型.

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

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

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

我正在尝试解决如何在这里使用TypeScript以便使用适当的类型定义变量,或者为了进行编译而需要的任何东西.

Answer 1

一个小序言:

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

问题的核心:

(1)创建拖动行为时,请确保泛型对应于要拖动的元素对应的元素类型和绑定数据类型.在上述情况下,这应该意味着d3.drag<SVGCircleElement, INode>()

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

(3)确保应用拖动行为的选择具有相应的类型.该Selection接口有四个泛型,其中前两个再次对应于所选元素的类型及其绑定数据的类型.Selection方法,如select,selectAll,data和append都有对应的"东西",他们可能会影响仿制药.在这种情况下data,可以基于传递到呼叫中的数据由TS推断通用.对于其他提到的方法,您可能必须明确说明,您正在"选择"或"追加"是什么.对于上述情况,您可以考虑:

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

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

DragBehavior定义或相关定义测试在这里. 选择定义.由于所有这些TS定义都有广泛的JSDoc注释,一个好的IDE会有悬停工具提示/窥视,允许您在编写时查看它们.请留意关于泛型的评论部分.希望这可以帮助.