放大图表数据时，我如何使用 D3.js "onClick" 事件和 nvd3 柱？

Question

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

我能够使用这个 question to figure out how to add an "onClick" event for bars using nvd3's linePlusBarChart。

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!"); } );
}

放大图表数据时，我如何使用 D3.js "onClick" 事件和 nvd3 柱？

How can I use D3.js "onClick" event with an nvd3 bar when zoomed in on chart data?

javascript

d3.js

nvd3.js