放大图表数据时,如何使用带有nvd3条的D3.js“onClick”事件?

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