d3.js v5 How do I truncate tick text?

Question

I have a chart that has some long categorical titles on my y axis. I want to truncate them to 15 characters, but I can't figure out where to do it. A lot of the links I've found deal with wrapping labels but not truncating?

Do I use 'ticktext'? Is there a way to select the labels and apply a truncation formula to them?

Thanks for the assistance.

Does this answer your question? [Add ellipses to overflowing text in SVG?](https://stackoverflow.com/questions/15975440/add-ellipses-to-overflowing-text-in-svg) — Ouroborus, Sep 26 '20 at 22:09

score 3 · Accepted Answer · answered Sep 29 '20 at 00:50

Those suggestions helped me get closer. Here is what I ended up doing.

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())

And then here is my truncate function

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

It's cool, thanks!. But you didn't use the width variable, did you forget it or did you change your mind in the process? — nivalderramas, Jan 18 '22 at 20:59

d3.js v5 How do I truncate tick text?

1 Answers1