放大圖表數據時，如何將 D3.js“onClick”事件與 nvd3 條一起使用？

Question

另一個模糊的 nvd3 問題，這次是onClick 。

我能夠使用這個問題來弄清楚如何使用 nvd3 的linePlusBarChart為條形添加“onClick”事件。

這里的jsfiddle 正在工作。 請隨意點擊一個欄，看看我要做什么（使用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 bar 獲取數據，然后我可以使用 bar 數據（數量和日期）用 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!"); } );
}