20

X 軸の目盛りのラベルとして文字列を使用して棒グラフを作成したいと考えています (たとえば、0、1、2 などではなく、1 年目、2 年目など)。

次のように、x 軸の数値 (0、1、2、3 など) を使用することから始めました。

1）範囲を生成します：

     x = d3.scale.ordinal()
        .domain(d3.range(svg.chartData[0].length)) //number of columns is a spreadsheet-like system
        .rangeRoundBands([0,width], .1); 


     y = d3.scale.linear()
        .domain(Math.min(d3.min(svg.chartData.extent),0), Math.max(d3.min(svg.chartData.extent),0)]) 
        .range([height, 0])
        .nice();

2) 軸を作成します。

     d3.svg.axis()
        .scale(x);

3) 軸を再描画します。

     svg.select(".axis.x_axis")
        .call(make_x_axis().orient("bottom").tickSubdivide(1).tickSize(6, 3, 0));

これは、デフォルトの数値軸ラベルでうまく機能します。

このように x tickValues に文字列の配列を使用しようとすると....

     d3.svg.axis()
        .scale(x).tickValues(svg.pointsNames); //svg.pointsNames = ["Year 1", "year 2", etc.]

...チャートを再描画すると（データ/設定の変更の有無にかかわらず）、ラベルはこのように入れ替わります。

ここに画像の説明を入力 ここに画像の説明を入力

列 1 が列 0 に置き換わる様子と、その逆の様子に注意してください。

なぜこれが起こるのか知っていますか？

4

2 に答える 2

22

アップデート

svg.pointsNamestickValues として適用する前に並べ替えるだけです。データを並べ替えるのとまったく同じ方法で並べ替えるようにしてください。このようにして、ラベルと目盛り値の間で常に 1 対 1 のマッピングが維持されます。

また、可能であれば、ここでtickFormat` 関数をチェックしてください。これは私にとってより良い選択肢のようです。

//Tick format example
chart,xAxis.tickFormat(function(d, i){
    return "Year" + d //"Year1 Year2, etc depending on the tick value - 0,1,2,3,4"
})
于 2012-08-02T06:50:37.747 に答える