将事件处理程序附加到nvd3图表的标签

Posted 2021-03-28

我试图将click事件处理程序附加到x轴上的nvd3 discreteBarcharts'标签。这是代码：

labelClick = () => {
 console.log("label was clicked!!!");
}

drawBarChartWithData = (node, clusterData) => {
 console.log("drawBarchartWithData method called");
 var that = this;
   nv.addGraph(function() {
      var chart = nv.models.discreteBarChart()
          .x(function(d) { return d.label })
          .y(function(d) { return d.value })
          .staggerLabels(true)
          //.staggerLabels(historicalBarChart[0].values.length > 8)
          .showValues(false)
          .duration(250)
          ;
      d3.select(node)
          .datum(clusterData)
          .call(chart);

--------> d3.select(node)
        .selectAll('.tick')
          .on('click', that.labelClick); <----------

nv.utils.windowResize(chart.update);

      return chart;
  }.bind(this));
} 

上面用箭头突出显示的代码是我试图添加处理程序的方式。我也尝试了nv.addGraph函数之外的相同代码并提供了事件处理函数：

       d3.select(node)
        .selectAll('.tick')
          .on('click', function(d) {
            console.log(d + "label was clicked!!!");
          });

我也试过.selectAll('text')和selectAll('.x.axis .tick')而不是.selectAll('.tick')。

我在这做错了什么？任何建议将不胜感激。

答案

对于具有pointer-events: none;类的元素，NVD3具有默认样式nv-axis。

此样式禁用单击事件处理，因此您必须覆盖它。您可以使用以下代码实现它：

d3.select(node)
  .selectAll('.nv-x.nv-axis, .nv-x .nv-axis')
  .style('pointer-events', 'all');

d3.select(node)
  .selectAll('.nv-x .tick')
  .on('click', function() {
    /* ... */
  });

检查working demo。