d3.js - d3 v4 TypeScript 类型

Question

我正在组建一个小的 d3 项目，因为它非常复杂，所以我想使用 TypeScript 来使一些开发更简单，更不容易出错。

我正在使用 d3 v4。我想我之前使用了错误的类型定义文件，但是很长一段时间我都没有遇到任何问题，直到它最终提示 d3不包含 scaleLinear() 的定义.

我已经转移到我认为是正确的定义文件，确实有 d3.scaleLinear() 的定义。 ，但是现在我的大量变量具有无效类型。

这里有一些例子:

public SVGElement    : d3.Selection<SVGElement>;
public SVGTitleArea  : d3.Selection<SVGGElement>;
public SVGLegendArea : d3.Selection<SVGGElement>;
public SVGXAxisArea  : d3.Selection<SVGGElement>;
public SVGYAxisArea  : d3.Selection<SVGGElement>;
public SVGChartArea  : d3.Selection<SVGGElement>;

我以前是这样创建的:

this.SVGElement = d3.Select("body").append("svg");
this.SVGTitleArea = <d3.Selection<SVGGElement>>this.SVGElement.append("g");

等等

我还有许多函数可以呈现图形的不同组件:

public RenderTitle() : d3.Selection<SVGGElement> {
  this.SVGTitleArea = <d3.Selection<SVGGElement>>this.SVGElement.append("g");

  // Do stuff here

  return this.SVGTitleArea;
}

自从移动到可能正确的打字文件后，它现在提示 d3.Selection类型需要 4 种类型:

interface Selection<GElement extends Element | EnterElement | Window, Datum, PElement extends Element | EnterElement | Window, PDatum>

现在，我知道这并不理想，我更喜欢更强大的类型，但我已经设法至少修复了与变量定义相关的错误:

public SVGElement    : d3.Selection<SVGElement, any, any, any>;
public SVGTitleArea  : d3.Selection<SVGGElement, any, any, any>;
public SVGLegendArea : d3.Selection<SVGGElement, any, any, any>;
public SVGXAxisArea  : d3.Selection<SVGGElement, any, any, any>;
public SVGYAxisArea  : d3.Selection<SVGGElement, any, any, any>;
public SVGChartArea  : d3.Selection<SVGGElement, any, any, any>;

但是我不能对渲染函数做同样的事情:

public RenderTitle() : d3.Selection<SVGGElement, any, any, any>

我试过将鼠标悬停在创建的调用上，例如 <g>元素来查看签名应该是什么，但它实际上给出了 , any any any> .

我最好的选择是什么？有没有简单的方法来修复这些类型？我是否应该将它们全部保留为 any ？我应该降级到 d3 v3 吗？我应该继续使用 v4 并放弃 TypeScript 吗？

谢谢。

Answer 1

我看不出您的问题到底出在哪里。这是可能的:

let mySelection : d3.Selection<SVGElement, {}, HTMLElement, any> = d3.selectAll<SVGElement, {}>('#line');
function foo() : d3.Selection<SVGElement, {}, HTMLElement, any> {
  return mySelection.append<SVGElement>('g')
}
alert(foo().node().tagName)