如何在d3中使用SimulationLinkDatum和SimulationNodeDatum

问题描述

我在使用SimulationLinkDatum类型时遇到问题.我制作了两个类Node和Link，它们实现了SimulationNodeDatum和SimulationLinkDatum.当我去尝试使用SimulationLinkDatum时，打字稿说d.source.x，d.targe.x等打字稿说"属性'x'在'string | number | Node'类型上不存在."

I'm having a problem using the SimulationLinkDatum Type. I made two classes Node and Link that implement SimulationNodeDatum and SimulationLinkDatum. When I go to try and use SimulationLinkDatum typescript says that d.source.x, d.targe.x, etc typescript says that "Property 'x' does not exist on type 'string | number | Node'."

我知道SimulationLinkDatum接受 number |字符串|< T> 表示源节点和目标节点的属性，如果您使用数字或字符串，它将被突变为SimulationNodeDatum.这只是我们必须忍受的东西，还是有使用这些接口的更好方法?

I understand that the SimulationLinkDatum accepts number | string | <T> for the source and target node properties and that if you use number or string that it will be mutated into a SimulationNodeDatum. Is this just something that we have to live with or is there a better way of using these interfaces?

谢谢

class D3Component {
    private createPathString(d: SimulationLinkDatum<Node>) {
        return 'M' + d.source.x + ',' + d.source.y + 'L' + d.target.x + ',' + d.target.y;
    }
}
class Node implements SimulationNodeDatum {
    public x: number;
    public y: number;
    constructor (public id: number) {}
}

class Link implements SimulationLinkDatum<Node> {
    constructor (public source: Node, public target: Node)  {}
}

推荐答案

正如您正确指出的那样， d3-force 的TypeScript定义反映了变异节点和链接固有的数据结构的方法.实际的JS实现.

As you correctly point out, the TypeScript definitions for d3-force reflect the approach to mutating the node and link data structures inherent in the actual JS implementation.

具体来说，对于 SimulationLinkDatum< NodeDatum扩展SimulationNodeDatum> 接口，建议的做法是使用自定义类型防护，例如:

Specifically, for the SimulationLinkDatum<NodeDatum extends SimulationNodeDatum> interface, the suggested practice is to use a custom type guard, e.g.:

function isNodeObject<T>(node: number | string| T): node is T {
    return typeof node !== 'number' && typeof node !== 'string';
}

然后可以像往常一样使用TypeScript的类型缩小.在上述情况下:

Then the type narrowing of TypeScript can be used in as usual, e.g. in your case above:

private createPathString(d: SimulationLinkDatum<Node>) {
  if (isNodeObject(d.source) && isNodeObject(d.target)) {
    return 'M' + d.source.x + ',' + d.source.y + 'L' + d.target.x + ',' + d.target.y;
  } else {
    return '';
  }
}

虽然这是最可重用的方法，但在某些情况下，以下两种选择可能更合适:

While this is the most reusable approach, the following two alternatives may be more suitable in some situations:

(1)如果已知给定的代码段仅在已初始化的链接上调用，则可以简单地强制转换(< SimNode> d.source).x .对转换节点对象使用局部变量可以提高下游的可读性.

(1) If it is known that a given code segment will only be invoked on links that have already been initialized, then one may simply cast (<SimNode>d.source).x. Using local variables for the cast node objects may improve downstream readability.

(2)直接在 if 子句中使用缩小类型，而无需创建可重复使用的自定义类型防护.

(2) Use the type narrowing directly in an if-clause without creating a re-usable custom type guard.

鉴于当前定义接口的方式，这是访问变异属性中对象的关键方式.

Given the way the interfaces are currently defined, these are the key ways to access the objects in the mutated properties.

这篇关于如何在d3中使用SimulationLinkDatum和SimulationNodeDatum的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！