dimple js事件处理程序图表数据

时间:2014-12-10 12:46:48

标签: javascript d3.js dimple.js

我有一个带有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 
    });

1 个答案:

答案 0 :(得分:0)

您可以使用事件对象e。我安慰了e你可以在哪里找到不同的价值观。我在x轴和y轴分别得到e.cxe.cy的值。

 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