Q:

D3 update tick values without updating the domain

I have an x-axis with long tick names, and I want to provide their abbreviations as tick values. Long tick names are used to set the domain.
        axisElement = d3.axisBottom(scale)
            .tickValues(tickValues); // these are long names when axis is first drawn
        chart.append("g")
            .attr("class", "bottomAxis")
            .attr("transform", "translate(0, " + height + ")")
            .call(axisElement); 

I first draw the axis with proper long names which looks like this, and then try to update the ticks using axis.tickValues() function in D3. 
updateTicks(tickValues) {
        chart.select(".bottomAxis").call(this.axisElement.tickValues(tickValues));
    }

But when D3 draws the ticks, it uses the old domain values in scale (which are the long names) and messes up the positioning of abbreviated names. It looks like this. I also get the following error:
Error: <g> attribute transform: Expected number, "translate(NaN,0)".

Which, I believe, is saying that it tried to translate the tick according to old domain values, but found abbreviated value so it can't translate. 
I tried changing the scale's domain to abbreviated names, and then D3 positions them appropriately. 
My question is, is it possible to change tickValues without changing the domain values?

A:

You can do it like the following. You need to call axisBottom on your svg element and then use tickFormat to set the abbreviated text values. I have included a small example in the fiddle to show you. In the example, I am initially setting the long tick values first by default and then changing it to the abbreviated ones like you want to do.
var abbr = ["ll1", "ll2", "ll3", "ll4"];

svg
  .call(d3.axisBottom(x).tickFormat(function(d, i) {
    return abbr[i];
  }));

JSFiddle - https://jsfiddle.net/tkw07c96/

