d3.js - D3 update tick values without updating the domain -

i have x-axis long tick names, , want provide abbreviations tick values. long tick names used set domain.

        axiselement = d3.axisbottom(scale)             .tickvalues(tickvalues); // these long names when axis first drawn         chart.append("g")             .attr("class", "bottomaxis")             .attr("transform", "translate(0, " + height + ")")             .call(axiselement);  

i first draw axis proper long names looks this, , try update ticks using axis.tickvalues() function in d3.

updateticks(tickvalues) {         chart.select(".bottomaxis").call(this.axiselement.tickvalues(tickvalues));     } 

but when d3 draws ticks, uses old domain values in scale (which long names) , messes positioning of abbreviated names. looks this. following error:

error: <g> attribute transform: expected number, "translate(nan,0)". 

which, believe, saying tried translate tick according old domain values, found abbreviated value can't translate.

i tried changing scale's domain abbreviated names, , d3 positions them appropriately.

my question is, possible change tickvalues without changing domain values?

you can following. need call axisbottom on svg element , use tickformat set abbreviated text values. have included small example in fiddle show you. in example, setting long tick values first default , changing abbreviated ones want do.

var abbr = ["ll1", "ll2", "ll3", "ll4"];  svg   .call(d3.axisbottom(x).tickformat(function(d, i) {     return abbr[i];   })); 

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