nvd3 删除空点的工具提示内容

Question

我正在使用 nvd3 折线图图表并使用 useInteractiveGuideline: true。所以所有的点都绘制在特定日期的工具提示中。

这是我面临的问题，第一点和第二点有两个值，因此工具提示显示图例名称以及两个日期和值的两个值。

问题出现在第三个日期，我在第三行只有一个点，但它显示的是第三个点值和另一个点值。

图表第二行在第 7 个日期结束，但它显示第 7 个日期值直到图表结束。

我只需要显示有价值的点。

所以从第 8 天开始，工具提示只需要在工具提示中显示一个点。这是我的 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);
        }
      }
    }
  };

这是我的代码的完整演示

演示：Plunker demo

在此 link 他们已将 null 作为点值传递。所以它显示 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) 
            });

它将删除工具提示中不匹配的内容。

nvd3 删除空点的工具提示内容

nvd3 remove tooltip content for empty points

javascript

jquery

d3.js

angularjs

nvd3.js