Question

我正在使用dimple js并且我想设置一个事件，当用户点击图表上的图（圆圈）时，图表的值得到更新但是当我为它设置事件处理程序时这就是问题时间和如果用户第二次点击没有发生什么问题在这里我应该怎么做才能解决这个问题这是我的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", ["green", "yellow", "red"]);
    var lines = chart.addSeries(null, dimple.plot.line);
    lines.lineWeight = 4;
    lines.lineMarkers = true;
    chart.ease = "bounce";
    chart.staggerDraw = true;
    chart.draw(1000);

这是事件代码

 d3.selectAll("circle").on("click", function (e) {
        chart.data = [
            { "Value" : (Math.random() * 100), "Year" : 2009},
            { "Value" : (Math.random() * 100), "Year" : 2011},
            { "Value" : (Math.random() * 100), "Year" : 2007},
            { "Value" : (Math.random() * 100), "Year" : 2006},
            { "Value" : (Math.random() * 100), "Year" : 2014},
            { "Value" : (Math.random() * 100), "Year" : 2012},
            { "Value" : (Math.random() * 100), "Year" : 2011},
            { "Value" : (Math.random() * 100), "Year" : 2013},
            { "Value" : (Math.random() * 100), "Year" : 2015}
        ];
        chart.draw(1000);
    });

Answer 1

这对我有用。

Fiddle Link

d3.selectAll("circle").on("click", function (e) {
    chart.data = [
        { "Value" : (Math.random() * 100), "Year" : 2009},
        { "Value" : (Math.random() * 100), "Year" : 2011},
        { "Value" : (Math.random() * 100), "Year" : 2007},
        { "Value" : (Math.random() * 100), "Year" : 2006},
        { "Value" : (Math.random() * 100), "Year" : 2014},
        { "Value" : (Math.random() * 100), "Year" : 2012},
        { "Value" : (Math.random() * 100), "Year" : 2011},
        { "Value" : (Math.random() * 100), "Year" : 2013},
        { "Value" : (Math.random() * 100), "Year" : 2015}
    ];
    chart.draw(1000);
});

Dimple js事件处理程序

1 个答案: