D3，Typescript -“this”类型的参数不可分配给“BaseType”类型的参数

我这里有 stackbiltz -https://stackblitz.com/edit/lable-line-break-vaszab?file=src/app/app.component.ts https://stackblitz.com/edit/lable-line-break-vaszab?file=src/app/app.component.ts

我在 Angular 应用程序中有一个 d3 条形图。

使用在创建 z 轴刻度时调用的函数将 x 轴标签分成两行

private insertLinebreak(d) {

    let labels = d3.select(this);
    let words = d;
    console.log("Label:", labels.html());
    labels.text('');

    let index = words.indexOf(' ', words.indexOf(' ') + 1)
    let title = words.substr(0, index)
    let subtitle = words.substr(index + 1)

    let tspantitle = labels.append('tspan').text(title)
    let tspansubtitle = labels.append('tspan').text(subtitle)
    tspantitle
      .attr('x', 0)
      .attr('dy', '15')
      .attr('class', 'x-axis-title');
    tspansubtitle
      .attr('x', 0)
      .attr('dy', '16')
      .attr('class', 'x-axis-subtitle');

  };

该函数使用“this”来选择调用该函数的“g”（但在 d3 中我认为它选择了整个 svg）

这段代码在 stackblitz 中有效，但在我的实际代码中我收到错误

Argument of type 'this' is not assignable to parameter of type 'BaseType'.

我知道这不是很有帮助

我认为这与 Typescript 及其处理“this”的方式有关

有谁知道为什么会发生这种情况以及我该如何解决这个问题。

编译器推断类型this在你的里面insertLinebreak()作为你的班级StackedChartCompoent。看着类型定义 https://github.com/DefinitelyTyped/DefinitelyTyped/blob/444ae0e62284ed7f070c0bf563a2a9ca7fe5e2e5/types/d3-selection/index.d.ts#L123 for d3.select(node)，但是，您可以看到它期望节点扩展BaseType这是defined https://github.com/DefinitelyTyped/DefinitelyTyped/blob/444ae0e62284ed7f070c0bf563a2a9ca7fe5e2e5/types/d3-selection/index.d.ts#L21 as

export type BaseType = Element | EnterElement | Document | Window | null;

因为你的课程显然没有扩展这个BaseType你得到了错误。

基本上有两种方法可以解决这个问题：

1. 如果您需要insertLinebreak()方法仅在一处，即作为回调.each()，您可以将其设为函数表达式，然后将其直接作为参数传递给.each()

   .each(function() {
     let labels = d3.select(this);   // works
     // ...the original method's body
   })
   

   这是可行的，因为编译器现在知道该函数的单个入口点，并且可以推断出该函数的类型this since .each() https://github.com/d3/d3-selection/blob/9ffa69f363b5ee9af2171879d798091eab68def0/src/selection/each.js#L5 uses Function.prototype.call() https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call绑定this到节点。

   _{Keep in mind, though, that you have to use the classic function expression in favor of an ES6 arrow function because that would have this again point to its lexical scope instead of to the node.}

2. 幸运的是，TypeScript 本身内置了一种更惯用的方法。自从2.0版本 http://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-0.html#specifying-the-type-of-this-for-functions你可以提供一个假的this范围 http://www.typescriptlang.org/docs/handbook/functions.html#this-parameters作为函数参数列表中的第一项。这个参数告诉编译器什么this指的是所述函数的内部。因此，您的代码可以重写为：

   private insertLinebreak(this: SVGTextElement) {
     let labels = d3.select(this);   // works
     // method body left untouched
   }