D3ドメインを更新せずにチック値を更新する

Question

長いティック名を持つx軸があり、その略語をティック値として提供したいと考えています。長い目盛りの名前は、ドメインを設定するために使用されます。

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

私が最初にthisのように見える適切な長い名前の軸を描き、その後、D3でaxis.tickValues()機能を使用してダニを更新してみてください。

updateTicks(tickValues) { 
     chart.select(".bottomAxis").call(this.axisElement.tickValues(tickValues)); 
    } 

しかし、D3は、ダニを描画するとき、それは（長い名前です）規模の古いドメインの値を使用して、略称のポジショニングを台無しに。それはthisのように見えます。私はまた、次のエラーを取得：

Error: <g> attribute transform: Expected number, "translate(NaN,0)". 

、私は信じている、それは古いドメインの値に応じて目盛りを翻訳しようとしたことを言っているが、それは変換できないので、短縮値を発見しました。

スケールのドメインを短縮名に変更しようとしましたが、D3で適切に配置しました。

私の質問は、ドメイン値を変更せずにtickValuesを変更できますか？

Answer 1

次のようにすることができます。 svg要素にaxisBottomと電話し、tickFormatを使用して、短縮されたテキスト値を設定する必要があります。私はフィドルにあなたを示すための小さな例を入れました。この例では、最初はデフォルトで長いティックの値を設定してから、やりたいように省略した値に変更します。

var abbr = ["ll1", "ll2", "ll3", "ll4"]; 

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

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