放大图表数据时，如何将 D3.js“onClick”事件与 nvd3 条一起使用？

Question

另一个晦涩的 nvd3 问题，这次是 onClick。

我能够使用这个question 来弄清楚如何使用nvd3 的linePlusBarChart 为条形添加“onClick”事件。

jsfiddle here is working。请随意单击一个栏以查看我的目标（使用alert 作为测试）。相关代码在 JavaScript 的底部，也显示在此处：

d3.select('#chart1 svg')
    .datum(testdata)
    .transition().duration(500).call(chart);
    nv.utils.windowResize(chart.update);
    chart.dispatch.on('stateChange', function(e) { nv.log('New State:', JSON.stringify(e)); });
    return chart;       
   }, function(){
      d3.selectAll(".nv-bar").on('click', 
          function(e){
            console.log(e);
            alert("You clicked on bar!");
          }
      );   
  });

这真是太棒了！我对这个解决方案感到非常满意。使用function(e) 从 NVD3 栏获取数据，然后我可以使用栏数据（数量和日期）通过 JavaScript 做其他很酷的事情。

不幸的是，我发现如果我使用底部面板放大特定日期范围，'onClick' 事件将停止工作。

发生了什么导致onClick 事件与特定栏解除关联？

我需要在其他位置添加onClick 逻辑吗？

任何帮助将不胜感激。

Answer 1

画笔调用historicalBar 图表，并将焦点栏作为选择。

在渲染图表后调度renderEnd 事件。

我们将 onclick 回调放在一个单独的函数中，因为我们不止一次需要它

function addOnClick() {
  d3.selectAll(".nv-bar")
    .on('click', function(e) { console.log(e); alert("You clicked on bar!"); } );
}

我们需要为此事件添加回调

chart.bars.dispatch.on('renderEnd', addOnClick);

图表的完整代码将是

var chart;
nv.addGraph(function() {
    chart = nv.models.linePlusBarChart()
      .margin({top: 50, right: 80, bottom: 30, left: 80})
      .legendRightAxisHint(' [Using Right Axis]')
      .color(d3.scale.category10().range());
    chart.xAxis.tickFormat(function(d) {
      return d3.time.format('%x')(new Date(d))
    }).showMaxMin(false);
    chart.y2Axis.tickFormat(function(d) { return '$' + d3.format(',f')(d) });
    chart.bars.forceY([-3899468]).padData(false);
    chart.lines.forceY([-600]).padData(false);

    chart.x2Axis.tickFormat(function(d) {
      return d3.time.format('%x')(new Date(d))
    }).showMaxMin(false);
    d3.select('#chart1 svg')
      .datum(testdata)
      .transition().duration(500).call(chart);
    nv.utils.windowResize(chart.update);
    chart.dispatch.on('stateChange', function(e) { nv.log('New State:', JSON.stringify(e)); });
    chart.bars.dispatch.on('renderEnd', addOnClick);
    return chart;
  }, addOnClick
);
function addOnClick() {
  d3.selectAll(".nv-bar")
    .on('click', function(e) { console.log(e); alert("You clicked on bar!"); } );
}