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);
  ... 
}

有关演示，请参见this stackblitz。

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

1 个答案: