如何在nvd3饼图中单击选择标签名称

时间:2015-03-28 06:25:33

标签: pie-chart nvd3.js

这是我用nvd3创建的饼图。 Pie chart

我在寻找什么: 那是当我点击任何切片时,例如蓝色的“中性”,我需要在控制台中获取标签值(此处为蓝色,即“中性”)。

这是我的代码。

function pieChart(pieData) {
        $(".dataContentAllPie").empty();
nv.addGraph(function() {
  var chart = nv.models.pieChart()
      .x(function(d) { return d.label })
      .y(function(d) { return d.value })
      .color([
                     '#5EA9DD', '#008000','#ff0000','#bc5e03'
                ])
      .showLabels(true) 
      .labelThreshold(.05) 
      .labelType("percent")
      .donut(true)  
      .donutRatio(0.35) 
      ;

    d3.select("#chartSenti svg")
        .datum(pieData)
        .transition().duration(350)
        .call(chart);

    d3.selectAll('.nv-slice')
      .on('click', function(){
        console.log('hello - ', this.hasClass("nv-label")[0].textContent);
      }); 
  return chart;
});

};

以下是我在我的控制台中出现的错误: “this.hasClass不是函数”

有人可以帮我解决这个问题吗?

1 个答案:

答案 0 :(得分:2)

你是正确的方式。只需将参数传递给事件侦听器并正确获取数据。

d3.selectAll('.nv-slice')
  .on('click', function(d) {
    console.log(d.data.label);
  });