酒窝 js 事件处理程序图表数据

Question

我有一个带有dimple js 的条形图，我设置了一个事件，当一个条单击时会发生某些事情，但我想要已单击的特定条的数据以及单击了哪个条我怎样才能得到它
这是jsfiddle
这是我的示例 js 代码：

data = [
        { "Value" : 10, "Year" : 2009},
        { "Value" : 11, "Year" : 2011},
        { "Value" : 12, "Year" : 2007},
        { "Value" : 13, "Year" : 2006},
        { "Value" : 14, "Year" : 2014},
        { "Value" : 15, "Year" : 2012},
        { "Value" : 16, "Year" : 2011},
        { "Value" : 17, "Year" : 2013},
        { "Value" : 18, "Year" : 2015}
    ];
   var svg = dimple.newSvg("#chartContainer", 600, 400);
   var chart = new dimple.chart(svg, data);
   var x = chart.addCategoryAxis("x", "Year");
    x.addOrderRule("Year");
    var y = chart.addMeasureAxis("y", "Value");
    chart.addColorAxis("Value", ["blue", "purple", "red"]);
    var lines = chart.addSeries(null, dimple.plot.bar);
    lines.lineWeight = 4;
    lines.lineMarkers = true;
    chart.ease = "bounce";
    chart.staggerDraw = true;
    chart.draw(1000);



 d3.selectAll("rect").on("click", function (e) {
        ///I want to know which bar clicked here 
    });

Answer 1

您可以使用事件对象e。我已经安慰了e，您可以在其中找到不同的值。我分别用e.cx 和e.cy 得到了x 轴和y 轴的值。

 d3.selectAll("rect").on("click", function (e) {
        ////Which chart clicked
     console.log(e);
     $('p').html('Selected: x-axis -'+e.cx+', y-axis -'+e.cy);

    });

见fiddle