2016-12-22 3 views
2

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

rotateLabels: 45 

Она работает на оси х. Но это не работает для оси y. Я также попытался с помощью команд CSS, как

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

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

У любого есть идеи для меня, как я могу нарисовать метки оси y в диаграмме nvd3? Заранее спасибо

+0

Согласно документации nvd3 rotateLabels производится только для осей X. Попробуйте CSS-свойство 'css: {'transform': 'rotate (45deg)'}' – sandyJoshi

+0

он также не работает –

ответ

1

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

switch (axis.orient()) {} 

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

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

case 'left' Здесь и case 'right' предназначены для у осей. Так что в этих случаях и найти:

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

Но если вы все еще хотите изменить с передней заканчивается вы можете выбрать элемент DOM, используя d3 как

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

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

Смежные вопросы