nvd3.js -Линейная диаграмма с видоискателем :поворот меток осей и отображение значений линий при наведении курсора мыши

Я новичок в такого рода форумах, и мои знания английского языка не самые лучшие, но я постараюсь сделать все возможное :).

Пример линейной диаграммы с видоискателем можно найти на веб-сайте 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 ), связанного с точкой. Как я могу показать эти значения? Я пытался скопировать -и вставить методы, используемые в других примерах, где показаны эти значения, но это не работает. Есть идеи?

Спасибо, что поделились своим временем и знаниями :Д.

7
задан agamesh 27 February 2015 в 12:20
поделиться