легенда событие клика не работает после итерации - PullRequest
Новая
       22

легенда событие клика не работает после итерации

0 голосов
/ 09 октября 2018

У меня одна проблема с dimple.js.Я создал таблицу стеков и хочу привязать событие клика к каждой легенде этого графика.Если страница перезагружается, значит, она работает нормально, но в тот момент, когда я изменил данные диаграммы с помощью вызова функции, она быстро изменила содержимое диаграммы, но функция щелчка легенды больше не работает.Пожалуйста, помогите избавиться от этого.

Примечание: я не хочу использовать функцию обработчика щелчков Jquery.Я использовал Dimple Js селектор.Ниже приведен код, который я использовал, и к нему я прикрепил ссылку на скрипку. Fiddle Link 

var svg = dimple.newSvg("#chartContainer", 590, 400);
var data = [
    { Animal: "Cats", Value: (Math.random() * 1000000) },
    { Animal: "Dogs", Value: (Math.random() * 1000000) },
    { Animal: "Mice", Value: (Math.random() * 1000000) },
    { Animal: "Rat", Value: (Math.random() * 1000000) },
    { Animal: "Cow", Value: (Math.random() * 1000000) }
];
var myChart = new dimple.chart(svg, data);
myChart.setBounds(60, 30, 510, 305)
var x = myChart.addCategoryAxis("x", "Animal");
x.addOrderRule(["Cats", "Dogs", "Mice"]);
myChart.addMeasureAxis("y", "Value");
myChart.addSeries("Animal", dimple.plot.bar);
myChart.addLegend(30, 100, 60, 300, "left");
myChart.draw();
svg.selectAll("rect").on("click",function(){
    console.log("Hello");
});

//svg.selectAll("g rect.legendKey").on("click",function(){
//  console.log("Hello");
//});
d3.select("#btn").on("click", function() {
   myChart.data = [
     { Animal: "Cats", Value: (Math.random() * 1000000) },
     { Animal: "Dogs", Value: (Math.random() * 1000000) },
     { Animal: "Mice", Value: (Math.random() * 1000000) }
   ];
   myChart.draw(1000);
});

1 Ответ

0 голосов
/ 09 октября 2018

В вашем обработчике нажатия кнопок вы должны привязать обработчик нажатия легенды к новой легенде после myChart.draw(1000);

function legendClick(){
    console.log("Hello");
}

d3.select("#btn").on("click", function() {
   myChart.data = [
     { Animal: "Cats", Value: (Math.random() * 1000000) },
     { Animal: "Dogs", Value: (Math.random() * 1000000) },
     { Animal: "Mice", Value: (Math.random() * 1000000) }
   ];
   myChart.draw(1000);
   svg.selectAll(".legendKey").on("click", legendClick);
});
...