D3 Angular - разрыв строки в метке оси

Question

У меня есть стекблиц здесь - https://stackblitz.com/edit/lable-line-break-p1f9hb?file=src/app/bar-chart.ts

На оси X есть длинные метки, которые мне нужно разделить после второго слова, поэтому у меня есть заголовок и подзаголовок

КогдаЯ создаю ось X. Я вызываю функцию, которая разбивает строку и добавляет их в виде отдельных значений tspans

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

};  

Моя проблема заключается в добавлении их в неправильном порядке и отсутствии одного из заголовков.

Что я делаю не так, есть ли лучший способ сделать это.

Answer 1

Первая строка в insertLinebreak является источником проблемы, поскольку она извлекает все элементы меток каждый раз, когда вы хотите обработать один из них (смотрите консоль в this stackblitz ):

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

Чтобы выбрать только метку, которую вы обрабатываете, используйте d3.select(this):

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

См. этот стек для демонстрации.