Question

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

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

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

图形第二行在第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

Duplicate 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删除空点的工具提示内容

1 个答案: