I have stackbiltz here - <https://stackblitz.com/edit/lable-line-break-vaszab?file=src/app/app.component.ts>

I have a d3 bar chart in and Angular app.

The x axis labels are split onto two lines using a function that is called as the z axis ticks are created

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

  };

```

The function uses 'this' to select the 'g' calling the function (but in d3 I think it selects the whole svg)

This code works in stackblitz but in my actual code I get the error

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

```

I know this isn't very helpful

I think this hasbto do with Typescript and the way it handles 'this'

Does anyone know why this is happening and how I can fix this.