nvd3.js- 뷰 파인더가있는 선형 차트 : 마우스를 올리면 축 레이블 회전 및 선 값 표시

Question

이 포럼에 처음 왔고 영어 실력이 좋지 않지만 최선을 다할 것입니다.).

보기 찾기가있는 선형 차트의 예가 nvd3 website입니다. 이것은 지난 2 일 동안 함께 작업 해본 것 (examples \ lineWithFocusChart.html, nvd3 zip 패키지)입니다. 예제의 형식을 한 번만 변경했습니다. 표준 숫자 대신 X 축에서 날짜를 사용합니다. 여기

제 2 개 질문은 다음과 같습니다

1 어떻게 x 축에있는 모든 틱 '레이블을 회전 할 수 있습니까? 내 날짜가 너무 깁니다 (% x % X, 요일 및 시간).보기를 개선하기 위해 날짜를 순환 시키길 원합니다. 나는 단지 2 tick을 회전시킬 수있다 (x 축의 최대 값과 최소값, 가장자리). 이것은 내가 안에 수정 코드 "스위치 (axis.orient())"nv.d3.js에서 블록 : 당신은 내가 .attr에 놓여있다 확인할 수 있듯이

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; 

(','변환 '회전 (45) ')를 새로운 속성으로 사용하여 최대 및 최소 눈금이 회전되도록합니다 (axisMaxMin). 나는 x ticks와 관련이 있다고 생각하는 다른 텍스트 요소들과 함께 (nv.d3.js 파일 전체에 걸쳐) 이렇게 시도했다. 그러나 그것은 작동하지 않는다. 어떤 생각? 모든 X 레이블이 회전 된 것을 표시하기 위해 변환을 어디에 두어야합니까?

2-이 예에서 마우스를 선 위로 가져 가면 지점과 관련된 값 (x, y)을 표시하는 이벤트가 트리거되지 않습니다. 어떻게 그 값을 보여줄 수 있습니까? 나는이 값들이 보여 지지만 작동하지 않는 다른 예제들에서 사용 된 방법들을 복사 - 붙여 넣으려고했다. 어떤 생각?

시간과 지식을 공유해 주셔서 감사합니다. D.

Answer 1

nvd3에 대한 최신 업데이트로 인해 x 축 눈금 레이블을 정말 쉽게 회전시킬 수 있습니다. 이제 rotateLabels (degrees)라는 축 모델의 기능이 정수를 사용하고 xTick 레이블을 지정된 각도로 회전시킵니다. 이처럼 사용할 수있는 모든 XTICK 다시 45도 레이블을 회전하려면 :

var chart = nv.models.lineChart(); 
chart.xAxis.rotateLabels(-45);