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

标签 javascript jquery angularjs d3.js nvd3.js

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

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

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

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

我只需要显示有值(value)的点。

所以从第 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

最佳答案

我插入了一个条件来验证 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) 
            });

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

关于javascript - nvd3 删除空点的工具提示内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41845384/

相关文章:

javascript - 无法执行在父 jsp div 标记内调用的子 html 的 onload()

css - 使用 Angular 来设置相关 CSS 的样式

javascript - 消除 $watch 的替代方法

html - 强制带有图标的跨度与前面的跨度换行

javascript - 端口 8888 上的 Socket.io 和端口 80 上的网络服务器 - 无法将两者结合起来

javascript - 使用 JS 更改 svg 的 css 填充

javascript - Firefox 插件中的 window.location.replace 删除了整个 chrome!

javascript - 如何使用 jQuery 检测元素顶部是否靠近浏览器底部?

javascript - 将 Excel 文件发送到 ASP.NET Web API

javascript - 正则表达式问题模式不起作用