score:7

Accepted answer

The compiler infers the type of this inside your insertLinebreak() function as your class StackedChartCompoent. Looking at the type definitions for d3.select(node), however, you can see that it expects the node to extend BaseType which is defined as

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

Because your class clearly does not extend this BaseType you got the error.

There are basically two ways around this:

  1. If you need the insertLinebreak() method only at one place, namely as the callback to .each(), you can make it a function expression which is then passed directly as an argument to .each()

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

    This works because the compiler now knows the single entry point for this function and can infer the type of this since .each() uses Function.prototype.call() to bind this to the node.

    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. Fortunately, there is a more idiomatic way built into TypeScript itself. Since version 2.0 you can provide a fake this parameter as the first item in your function's parameter list. This parameter tells the compiler what this is referring to inside of said function. Your code could thus be rewritten as:

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

score:0

If still someone cannot find a solution, give this a try !!!

private insertLinebreak(d,i,n){
  //d is your data
  //i is the current index
  //n is the current node
  let labels = d3.select(this); // won't work
  let labels = d3.select(n[i]); // works
 }

Happy coding !!!!


Related Query

More Query from same tag