nvd3空のポイントのツールチップコンテンツを削除

Question

私はnvd3折れ線グラフを使用しており、useInteractiveGuideline: trueを使用しています。だから、特定の日付のすべてのポイントがツールチップにプロットされています。

ここで私は直面している問題です& 2つ目のポイントは2つの値を持つので、ツールチップは凡例の名前と日付と値の2つの値を表示しています。

問題は3番目の日付です。私は3行目に1点しか持っていませんが、3番目の点の値が別の点の値で表示されています。

グラフの2行目は7番目の日付で終了しますが、グラフの最後まで7番目の日付の値が表示されます。

値を持つポイントだけを表示する必要があります。

したがって、8番目の日付のツールチップでは、ツールチップの1つのポイントのみを表示する必要があります。彼らは小数点値としてnullを渡した。このリンクでPlunker demo

Duplicate link：ここに私のnvd3グラフオプションは、

$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); 
     } 
     } 
    } 
    }; 

である。ここに私のコードの完全なデモが

のデモです。したがって、それは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) 
      }); 

、としてそれを交換してください。