web-dev-qa-db-ja.com

D3-軸の目盛りに文字列を使用する

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.]

...チャートを再描画すると（データ/設定を変更してもしなくても）、ラベルは次のように入れ替わります。

enter image description hereenter image description here

列1が列0に取って代わり、その逆も同様です。

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

javascriptd3.js
20
Gian

更新

svg.pointsNamesをtickValuesとして適用する前。データの並べ替えとまったく同じ方法で並べ替えてください。このようにして、ラベルと目盛り値の間で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"
})
21
Jibi Abraham

おかげで...この関数をインラインif節で使用して、数値ではなく名前で別のx軸系列を処理しました。

Factions配列は、シリーズのインデックスでソートされたすべての関連する名前で構成されます。シリーズのインデックスは、データ内の対応するインデックスと一致します。

xAxis = d3.svg.axis().scale(xScale)
            .tickFormat(function(d) { 

                if(seriesX == 'seriesValue'){ 
                    return factions[d]}

                else{ 
                    return d}
            })    
         .orient("bottom");
0
stinglsa