Как я могу поместить повернутые по оси X метки на столбчатой ​​диаграмме с помощью nvd3?

Я строю диаграмму с использованием nvd3 multiBarChart и вам нужно настроить положение повернутых меток оси x:

enter image description here

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

Я хотел бы, чтобы метки столбцов не перекрывали диаграмму и не центрировались под каждым столбцом. Я мог бы выбрать ярлыки после построения графика и настроить их, но есть ли более простой способ?

Ответы

Ответ 1

Лучший способ, с помощью которого я нашел это, - выполнить вращение меток галочки по оси 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

Ответ 2

Для множественного графика вы можете добавить '#' + containerId + 'svg в d3.select, как показано ниже:

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

Ответ 3

Это сработало для меня. Основная причина, по которой я представляю это, заключается в том, что изменение привязки лучше, чем перевод позиции вручную.

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

Ответ 4

Следующие работали для меня:

chart.axislist["xAxis"]["rotateLabels"]= -45

Ответ 5

Независимо от того, что вы используете для вращения текста, введите start/middle/end

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