web-dev-qa-db-ja.com

nvd3を使用して、回転したx軸ラベルを縦棒グラフに配置するにはどうすればよいですか？

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

enter image description here

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

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

javascriptchartsd3.jsvisualizationnvd3.js
26
David Tinker

これを処理するために私が見つけた最良の方法は、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)' }) ;

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

Rotated / translated labels

35
River

複数のグラフの場合、以下のように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の回答をありがとう。

5
Simon

以下は私のために働いた：

chart.axislist["xAxis"]["rotateLabels"]= -45
1
Eric Jodet

これは私のために働いた。私がこれを提出する主な理由は、アンカーを変更する方が、手動で位置を移動するよりも優れているためです。

var xTicks = d3.select('.nv-x.nv-axis > g > g',_this.context.element).selectAll('g').selectAll('text');
xTicks.attr('transform', function() { return 'rotate(' + angle + ' 0,0)' }) ;
xTicks.attr('text-anchor',function() {
    var anchor;
    if(angle > 0){ anchor = 'start'; }
    else if(angle < 0){ anchor = 'end'; }
    else { anchor = 'middle'; }
    return anchor;
});
1
Gordon Siegfriedt

Cssの代替手段があります。

.nv-x .tick text {
    transform: rotate(-90deg) translateX(-15px) translateY(-7px);
}
0
Rodris

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

d3.select('.nv-x.nv-axis > g > g').selectAll('g.tick text').style('text-anchor', 'start');  //start/middle/end
0
Rayiez