如何在nvd3.js图上添加单击事件

Question

我正在使用nvd3.js并尝试添加点击事件

d3.selectAll(".nv-bar").on('click', function () {console.log("test");});

的jsfiddle

我怎样才能做到这一点 ？

Answer 1

刚刚发现这也有效(至少对于多栏图表):

chart.multibar.dispatch.on("elementClick", function(e) {
    console.log(e);
});

我必须查看src/multibar.js中的源代码才能找到; 因为它在那里,我想这是它的目的.然而,我在Alex的回答中说道:NVD3缺乏文档是一个非常大的缺点.这很令人伤心,因为项目的总体思路很棒:给我们D3的力量而不涉及所有细节......

Answer 2

我遇到了同样的问题,因为缺少文档而要将NVD3全部转储到一起......你需要做的是为addGraph()添加一个回调函数.另请注意d3.selectAll()而不是d3.select().

祝好运.

nv.addGraph(function() {
     var chart = nv.models.multiBarHorizontalChart()
         .x(function(d) { return d.label })
         .y(function(d) { return d.value })
         .margin({top: 5, right: 5, bottom: 5, left: 5})
         .showValues(false)
         .tooltips(true)
         .showControls(false);

     chart.yAxis
         .tickFormat(d3.format('d'));

     d3.select('#social-graph svg')
         .datum([data])
       .transition().duration(500)
         .call(chart);

       nv.utils.windowResize(chart.update);

       return chart;
     },function(){
          d3.selectAll(".nv-bar").on('click',
               function(){
                     console.log("test");
           });
      });