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

【问题标题】：Attach event handler to labels of an nvd3 chart将事件处理程序附加到 nvd3 图表的标签
【发布时间】：2018-03-03 02:16:43
【问题描述】：

我正在尝试将 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')。

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

【问题讨论】：

标签： reactjs d3.js nvd3.js

【解决方案1】：

NVD3 为 nv-axis 类的元素提供默认样式 pointer-events: none;。

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

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。

【讨论】：