nvd3.js - 如何在滚动时隐藏 nvd3 工具提示

Question

我试图在用户滚动页面时隐藏折线图的工具条。

    var chart = nv.models.lineChart()        .interpolate("cardinal")                .margin({left: 50})        .useInteractiveGuideline(true)        .duration(500)        .showLegend(true)        .showYAxis(true)        .showXAxis(true);    //... get data and plot it.    $(window).on("scroll", function(){        chart.interactiveLayer.tooltip.hidden(true);        chart.tooltip.hidden(true);    });

以上均无效。我错过了什么吗？

Answer 1

我可以使用 angular 12 和 https://github.com/krispo/ng2-nvd3 来处理这个问题.就我而言，在触摸屏设备上滚动和触摸图表时，工具提示固定在屏幕的左上角。

import { HostListener } from '@angular/core';
...
export class NameComponent {
    constructor() {}

    @HostListener('touchmove') touchmove(): void {
    d3.select(window).on('scroll', () => {
      d3.selectAll('.nvtooltip').style('opacity', '0');
    });
  }
}

https://github.com/krispo/angular-nvd3/issues/427#issuecomment-382711323