如何解决 Firefox 上的 nvd3 事件问题？

Question

我需要从这个事件中获取点击位置：

stacked: {
  dispatch: {
    elementClick: () => alert('stacked.dispatch'),
  },
},

虽然我有这个选项：useInteractiveGuideline: false。

主要问题是此选项在 Firefox 中不起作用。

这是一个 LINK。请在 Chrome 和 Firefox 中尝试。请注意，当您点击图表时应该会有一条提示消息。

也许有任何提示可以防止使用 useInteractiveGuideline: true 选项切换单独的堆叠区域？

Answer 1

看起来 angular-nvd3 指令有一些错误。使用纯 nvd3 创建了 stackedAreaChart，并且事件在 Chrome 和 Firefox 中工作正常。

  var chart = nv.models.stackedAreaChart()
                .x(function(d) { return d.x })
                .y(function(d) { return d.y })
                .clipEdge(true)
                .showLegend(false)
                .showControls(false)
                .useInteractiveGuideline(false)
                ;


  chart.stacked.dispatch.on('elementClick', function(e) {
    alert('element click');
  });

  chart.stacked.dispatch.on('areaClick', function(e) {
    alert('area click');
  });

工作example。

如何解决 Firefox 上的 nvd3 事件问题？

How to fix problem with nvd3 events on firefox?

d3.js

nvd3.js

angular