Как повернуть на метку оси Y в диаграмме nvd3

У меня мультичарт в nvd3. Мне нужно повернуть метки оси Y как для yAxis1, так и для yAxis2. Но я вижу, что нет хорошего варианта для поворота меток оси Y. Для вращения метки xAxis это довольно просто. Просто uisng rotateLabels: 45 работает для xAxis. Но для оси Y это решение не работает. Я попытался использовать rotateLabels внутри yAxis:{} следующим образом:

rotateLabels: 45

Это работает для оси x. Но это не работает для оси Y. Я также пытался использовать команды CSS, такие как

css:{'transform':'rotate(45)'}

Но вообще ничего не работает. Я не могу придумать никакого другого решения.

У кого-нибудь есть идеи для меня, как я могу изменить метки оси Y в диаграмме nvd3? заранее спасибо


nvd3.js angular-nvd3
person Programming is Fun    schedule 22.12.2016    source источник
comment
Согласно документации nvd3 rotateLabels предназначен только для осей X. Попробуйте свойство CSS css : { 'transform': 'rotate(45deg)'}   -  person sandyJoshi    schedule 22.12.2016
comment
тоже не работает   -  person Programming is Fun    schedule 22.12.2016

Ответы (1)


arrow_upward
1
arrow_downward

Вы не можете повернуть метку оси Y из таких параметров диаграммы. Вы можете сделать это, внеся небольшие изменения в библиотеку. Перейдите к коду nvd3.js. и найти блок переключателей

 switch (axis.orient()) {}

И внутри этого блока вы найдете

case 'top':
case 'bottom':
case 'right':
case 'left':

Здесь case 'left' и case 'right' для осей Y. Итак, зайдите внутрь этих ящиков и найдите:

axisLabel .style('text-anchor', rotateYLabel ? 'middle' : 'begin') .attr('transform', rotateYLabel ? 'rotate(90)' : '') Теперь вместо rotate(90) поставьте rotate(45) и все готово. Если вы хотите изменить другое свойство оси Y, вы также можете изменить его внутри этих блоков case.

Но если вы все еще хотите изменить внешний интерфейс, вы можете выбрать элемент dom, используя d3, например

d3.select(".nv-y2").select(".nvd3").select("text").attr("transform","rotate(45)");

Любая из вышеперечисленных стратегий должна работать.

person Md Johirul Islam    schedule 23.12.2016