Блог

Главная - Вопросы по программированию - восстановление метки оси в исходное положение после скрытия ряда

восстановление метки оси в исходное положение после скрытия ряда

#javascript #d3.js #nvd3.js

#javascript #d3.js #nvd3.js

Вопрос:

На моей приведенной здесь диаграмме NVD3 я сместил метку оси X вниз, чтобы даты были выровнены по вертикали. Для этого я сделал:

 xTicks.select('.nv-axislabel').attr("y", 90);  // line # 81 in JS

Теперь проблема в том, что если я скрою какую-либо из серий, используя элемент управления в правом верхнем углу, эта метка оси X восстановится в исходное положение, которое соответствует датам.

Как мне заставить ее оставаться в новой позиции без изменений?

jsFiddle

Ответ №1:

Несколько грязное решение, но может быть достаточно хорошим:

После изменения y атрибута метки удалите класс, который используется d3 внутренне для выбора метки и сброса ее атрибутов:

 xTicks.select('.nv-axislabel')
    .attr("y", 90)
    .classed({'nv-axislabel':false});

Затем, как может показаться, d3 просто создает новую метку в нежелательной позиции, вы можете добавить это в файл CSS:

 .nv-x .nv-axislabel {
    display:none;
}

Я добавил это как правило, потому что выполнение этого программно (с помощью .style() ) занимает слишком много времени, и вы можете видеть, как она мерцает.

СКРИПКА

Ответ №2:

Если вы обновите свою библиотеку NVD3 до версии 1.1.11b

Вы можете использовать встроенную функцию поворота меток. Попробуйте это :

 chart.xAxis
 .tickPadding(-5).rotateLabels(-90);

Измените x атрибут .tick major > text на 10 , чтобы переместить позицию немного ниже.

Тогда вам НЕ понадобится следующий код :

 // translate and rotate x-axis ticks
var xTicks = d3.select('.nv-x.nv-axis > g').selectAll('g');

xTicks.selectAll('g > .tick > text')
.attr('transform', function(d, i, j) {
    return 'translate (-10, 40) rotate(-90 0,0)'
});

// move x-axis label down
xTicks.select('.nv-axislabel').attr("y", 90)

Надеюсь, это поможет