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

Question

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

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

Answer 1

NVD3 为具有 nv-axis class.

的元素提供默认样式 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。

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

Attach event handler to labels of an nvd3 chart

reactjs

d3.js

nvd3.js