nvd3 빈 포인트에 대한 툴팁 내용을 제거하십시오.

Question

nvd3 꺾은 선형 그래프를 사용하고 useInteractiveGuideline: true을 사용했습니다. 그래서 모든 요점은 특정 날짜에 대한 툴팁으로 그려져 있습니다.

내가 직면 한 문제는 다음과 같습니다. & 두 번째 점에는 두 개의 값이 있으므로 도구 설명에 범례 이름과 날짜와 값의 두 값이 표시됩니다.

문제는 세 번째 날짜이며 세 번째 줄에는 한 점만 있지만 세 번째 점 값은 다른 점 값으로 표시됩니다.

그래프 두 번째 줄은 일곱 번째 날짜로 끝나지만 그래프 끝까지 일곱 번째 날짜 값을 표시합니다.

값이있는 점만 표시해야합니다.

그래서 8 번째 날짜부터 툴팁은 툴팁에 단 하나의 점만 표시해야합니다. 여기

$scope.options = { 
    chart: { 
     type: 'lineChart', 
     height: 450, 
     margin: { 
     top: 20, 
     right: 20, 
     bottom: 45, 
     left: 45 
     }, 
     duration: 500, 
     useInteractiveGuideline: true, 
     xAxis: { 
     axisLabel: 'Time (ms)', 
     showMaxMin: false, 
     tickFormat: function(d) { 
      return d3.format(',f')(d); 
     } 
     }, 
     yAxis: { 
     axisLabel: 'Y Axis', 
     axisLabelDistance: -20, 
     tickFormat: function(d) { 
      return d3.format(',.1f')(d); 
     } 
     } 
    } 
    }; 

여기 내 코드의 전체 데모입니다, 내 nvd3 그래프 옵션입니다

데모 : 그들은 포인트 값에 null를 통과 한이 링크에 Plunker demo

Duplicate link. 그래서 그것은 N/A를 보여주고 있습니다. 그러나 그래프는 합쳐지지 않습니다. null 값은 빈 포인트를 표시하고 라인 포인트가 연결되어 있지 않음을 나타냅니다. 그 라인을 연결해야하고 툴팁의 포인트를 없애거나 표시해야 함 N/A

Answer 1

xAxis 레이블과 툴팁 값을 확인하기위한 조건을 삽입했습니다. 툴팁에는 일치 된 xAxis 색인 만 추가되었습니다.

d.value !== p.data.x과 같은 조건을 사용했습니다. 여기서 p.data.x은 xAxis 레이블입니다. d.value은 툴팁 라벨입니다. 두 값이 일치하지 않으면 데이터를 제거했습니다. 라이브러리에 다음 코드를 찾을에서 ,

trowEnter.append("td") 
      .classed("value",true) 
      .html(function(p, i) { return valueFormatter(p.value, i) }); 

과로 교체

trowEnter.append("td") 
       .classed("value",true) 
       .html(function(p,i) { 
       if (d.value !== p.data.x) {this.parentNode.style.display = "none";} 
       return valueFormatter(p.value,i) 
      }); 

는 툴팁의 내용이 일치하지 제거합니다.