d3.js v5 如何截断刻度文本？

Question

我有一个图表，在我的 y 轴上有一些长分类标题。我想将它们截断为 15 个字符，但我不知道在哪里做。我发现的很多链接都处理包装标签但不截断？

我使用“ticktext”吗？有没有办法选择标签并对它们应用截断公式？

感谢您的帮助。

Answer 1

这些建议帮助我更接近。这就是我最终要做的。

var y = d3.scaleBand()
    .range([ 0, heightBar ])
    .domain(topGamesData.map(function(d) { return d.name; }))
    .padding(.1);
    bars.append("g")
    .attr("transform", "translate("+adj*3+"," + 0 + ")")
    .call(d3.axisLeft(y))
    .selectAll(".tick text")
        .call(truncateLabel, y.bandwidth())

然后这是我的截断函数

function truncateLabel(text, width) {
  text.each(function() {
    gameName = d3.select(this).text();
    if(gameName.length > 10){
        gameName = gameName.slice(0,10)
    }
    d3.select(this).text(gameName)
  })
}