Angular D3角度-轴标签中的换行符

我这里有一场闪电战-

x轴有长标签，我需要在第二个单词后拆分，所以我有一个标题和子标题

当我创建x轴时，我调用了一个函数，该函数将字符串拆分，并将它们作为单独的TSPAN添加

this.chart.append("g")
    .call(this.x_axis)
    .classed('x-axis', true)
    .attr("transform", "translate(0," + this.height + ")")

    .selectAll(".tick text")
    .each(this.insertLinebreak)


private insertLinebreak (d) {

    let labels = d3.select(".x-axis .tick text");
    let words = d;
    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');

};  

我的问题是它以错误的顺序添加它们，并且缺少一个标题

---

我做错了什么，有没有更好的方法

insertLinebreak中的第一行是问题的根源，因为每当您想要处理其中一个标签元素时，它都会检索所有标签元素（请在中查看控制台）：

---

请参阅演示。

您能提供stackblitz URL以允许我们使用它吗？我已经更新了链接这是我在实际应用程序中使用它的方式，但我得到一个错误-

错误TS2345:类型为“this”的参数不能分配给类型为“ArrayLike”的参数。

。我知道这是一个不同的问题，但我不能复制它来显示代码。我的实际应用程序的代码与stackblitz完全相同。我只能帮助解决问题和stackblitz中提供的代码。正如您所见，分叉堆栈闪电战与建议的修正一起工作。

private insertLinebreak(d) {
  let labels = d3.select(".x-axis .tick text"); // <-- This line causes the problem
  ... 
}

private insertLinebreak(d) {
  let labels = d3.select(this);
  ... 
}