如何在点击时获取栏的标签名称？

Question

如何在点击栏时获取标签名称。我正在使用 NVD3 图表。 这是NVD3图表的参考链接 图表链接：link

这样我就绑定了条形图的点击事件示例链接： link

var newarraydata = [];
    d3.json('http://developers.nncinfotech.com/betafishfront-aj/guser_data/591574b7e4365e0004356c3f_product.json', function(data) {
        nv.addGraph(function() {
            ///console.log(data);
            var chart = nv.models.multiBarHorizontalChart()
                .x(function(d) { newarraydata[d.label] = d.ProductName; return d.label })
                .y(function(d) {  return d.value })
                .margin({top: 10, right: 45, bottom: 25, left: 70})
                .showValues(true)           //Show bar value next to each bar.
                .tooltips(true)             //Show tooltips on hover.
                .tooltipContent(function(d, y, e, graph) {
                    
                    return '<div style="position: relative;text-align: left;"><h5 style="text-align: center;padding: 5px;">Products</h5> <hr style="width: 90%;margin: 0 auto;text-align: center;"><p style="text-align: left;"> ' +  newarraydata[y].replace(/,/g, ", <br>") + '</p></div>'


                })

                .transitionDuration(350)
                .showControls(false);        //Allow user to switch between "Grouped" and "Stacked" mode.
            chart.valueFormat(d3.format('d'));
            d3.select('#modal_product_chart svg')
                .datum(data)
                .call(chart);
            nv.utils.windowResize(chart.update);
            return chart;
        },function(){
            d3.selectAll(".nv-bar.positive").on('click',
                function(){
                    //console.log($(this));
                    //here I want that bar label name 
                });
        });
    });

<script type="text/javascript" src="/js/lib/dummy.js"></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
 <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.15-beta/nv.d3.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.15-beta/nv.d3.min.css">
 <div id="chart1">
  <svg width=600 height=500></svg>
</div>

Answer 1

试试这个方法。

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

var data = [{
    "key": "Series 1",
    "color": "#d67777",
    "values": [{
        "label": "Group A",
        "value": -1.8746444827653
      },
      {
        "label": "Group B",
        "value": -8.0961543492239
      },
      {
        "label": "Group C",
        "value": -0.57072943117674
      },
      {
        "label": "Group D",
        "value": -2.4174010336624
      },
      {
        "label": "Group E",
        "value": -0.72009071426284
      },
      {
        "label": "Group F",
        "value": -0.77154485523777
      },
      {
        "label": "Group G",
        "value": -0.90152097798131
      },
      {
        "label": "Group H",
        "value": -0.91445417330854
      },
      {
        "label": "Group I",
        "value": -0.055746319141851
      }
    ]
  },
  {
    "key": "Series 2",
    "color": "#4f99b4",
    "values": [{
        "label": "Group A",
        "value": 25.307646510375
      },
      {
        "label": "Group B",
        "value": 16.756779544553
      },
      {
        "label": "Group C",
        "value": 18.451534877007
      },
      {
        "label": "Group D",
        "value": 8.6142352811805
      },
      {
        "label": "Group E",
        "value": 7.8082472075876
      },
      {
        "label": "Group F",
        "value": 5.259101026956
      },
      {
        "label": "Group G",
        "value": 0.30947953487127
      },
      {
        "label": "Group H",
        "value": 0
      },
      {
        "label": "Group I",
        "value": 0
      }
    ]
  }
];
nv.addGraph(function() {
  var chart = nv.models.multiBarHorizontalChart()
    .x(function(d) {
      return d.label
    })
    .y(function(d) {
      return d.value
    })
    .margin({
      top: 30,
      right: 20,
      bottom: 50,
      left: 175
    })
    .showValues(true) //Show bar value next to each bar.
    .tooltips(true) //Show tooltips on hover.
    .transitionDuration(350)
    .showControls(true); //Allow user to switch between "Grouped" and "Stacked" mode.

  chart.yAxis
    .tickFormat(d3.format(',.2f'));

  d3.select('#chart1 svg')
    .datum(data)
    .call(chart);

  nv.utils.windowResize(chart.update);

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

<script type="text/javascript" src="/js/lib/dummy.js"></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
 <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.15-beta/nv.d3.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.15-beta/nv.d3.min.css">
 <div id="chart1">
  <svg width=600 height=500></svg>
</div>

Answer 2

chart.multibar.dispatch.on('elementClick', function(e){
  console.log(e.point['label']);
  refreshChart();
});

把这个放在refreshChart上面，去掉你的点击函数代码

参考这个链接

https://coderwall.com/p/08wc2g/bind-on-click-events-in-nvd3-js-charts