Я новичок в такого рода форумах, и мои знания английского языка не самые лучшие, но я постараюсь сделать все возможное :).
Пример линейной диаграммы с видоискателем можно найти на веб-сайте nvd3 . Это тот (examples\lineWithFocusChart.html, zip-пакет nvd3 ), с которым я работал последние 2 дня. Я внес только одно изменение в формат примера :Я использую даты по оси X вместо обычных чисел.
Вот мои 2 вопроса:
1 -Как повернуть все метки делений по оси X? Мои даты слишком длинные (%x %X, день и время ), и я хочу, чтобы они вращались, чтобы улучшить их просмотр. Я могу повернуть только 2 тика (максимум и минимум, края оси x ). Это код, который я изменяю внутри блока «switch (axis.orient ())» в nv.d3.js :
case 'bottom':
axisLabel.enter().append('text').attr('class', 'axislabel')
.attr('text-anchor', 'middle')
.attr('y', 25);
axisLabel
.attr('x', scale.range()[1] / 2);
if (showMaxMin) {
var axisMaxMin = wrap.selectAll('g.axisMaxMin')
.data(scale.domain());
axisMaxMin.enter().append('g').attr('class', 'axisMaxMin').append('text');
axisMaxMin.exit().remove();
axisMaxMin
.attr('transform', function(d,i) {
return 'translate(' + scale(d) + ',0)'
})
.select('text')
.attr('dy', '.71em')
.attr('y', axis.tickPadding())
.attr('text-anchor', 'middle')
.text(function(d,i) {
return ('' + axis.tickFormat()(d)).match('NaN') ? '' : axis.tickFormat()(d)
})
.attr('transform', 'rotate(45)')
;
d3.transition(axisMaxMin)
.attr('transform', function(d,i) {
return 'translate(' + scale.range()[i] + ',0)'
});
}
break;
. Как вы можете проверить, я поместил.attr ('transform', 'rotate (45 )')в качестве нового атрибута, поэтому максимальные и минимальные отметки поворачиваются (axisMaxMin ). Я пробовал этот способ (в файле nv.d3.js )с другими текстовыми элементами, которые, как мне кажется, связаны с метками x, но это не работает. Есть идеи? Где я должен поместить преобразование, чтобы показать все метки X повернутыми?
2 -В примере, когда вы наводите указатель мыши на линию, не запускается событие для отображения значения (x,y ), связанного с точкой. Как я могу показать эти значения? Я пытался скопировать -и вставить методы, используемые в других примерах, где показаны эти значения, но это не работает. Есть идеи?
Спасибо, что поделились своим временем и знаниями :Д.