26

nvd3 の multiBarChart を使用して棒グラフを作成しており、回転した x 軸ラベルの位置を調整する必要があります。

ここに画像の説明を入力

var chart = nv.models.multiBarChart();
...
chart.rotateLabels(-90);

列ラベルがグラフと重ならないようにし、各バーの下に中央揃えにしたいと思います。グラフをプロットした後にラベルを選択して調整することはできますが、もっと簡単な方法はありますか?

4

6 に答える 6

35

これを処理するために私が見つけた最良の方法は、x 軸の目盛りラベルの回転を自分で実行することです。なんで？NVD3 が回転と関連する変換を適切に処理していないためです。画像を見ると、ライブラリが回転により、ラベルが表す列の真下からラベルを移動できることがわかります。また、axis.tickPadding()値などを誤って処理し始めます。

最初に行う必要があるのは、次のように、チャートに翻訳されたラベル用の十分なスペースがあることを確認することです。

chart.margin({bottom: 60});

次に、ラベルを移動および回転できます。

var xTicks = d3.select('.nv-x.nv-axis > g').selectAll('g');
xTicks
  .selectAll('text')
  .attr('transform', function(d,i,j) { return 'translate (-10, 25) rotate(-90 0,0)' }) ;

ラベルは次のようになります。

回転/平行移動したラベル

于 2012-11-20T11:38:33.060 に答える
5

複数のグラフの場合、以下のようにd3.selectに " '#' + containerId + ' svg "を追加できます。

//Rotate x-axis label
var xTicks = d3.select('#' + containerId + ' svg .nv-x.nv-axis > g').selectAll('g');
xTicks
    .selectAll('text')
    .attr('transform', function(d,i,j) { return 'translate (-15, 60) rotate(-90 0,0)' });

とにかく、@Riverの回答に感謝します。

于 2013-12-05T06:59:47.183 に答える
0

テキストの回転が何であれ、開始/中間/終了を指定します

d3.select('.nv-x.nv-axis > g > g').selectAll('g.tick text').style('text-anchor', 'start');  //start/middle/end
于 2014-12-11T05:23:10.327 に答える