Слово облако не в состоянии использовать OnClick

Question

Я строю Wordcloud с помощью Джейсон Дэвис d3.layout.cloud() https://github.com/jasondavies/d3-cloud.git
я решил добавить переход и длительность атрибуты, чтобы сделать Wordcloud выглядеть лучше, когда он приходит на экране. Тем не менее, я больше не могу использовать атрибут («click»), поскольку он отправляет мне ошибку:
Uncaught TypeError: undefined не является функцией
Это относится к строке .on («click», function (d) {alert ('ok');})
Когда я удаляю переход и продолжительность, щелчок работает правильно.
Вот код JS:

var fill = d3.scale.category20(); 


var layout = d3.layout.cloud().size([1500, 800]) 
     .words(frequency_list) 
     .padding(5) 
     .rotate(function() {return ~~(Math.random() -0.5) * 120;}) 
     .font("Impact") 
     .fontSize(function(d) { return d.size; }) 
     .on("end", draw); 

layout.start(); 


function draw(words) { 
d3.select("svg").remove(); 
d3.select("body").append("svg") 
    .attr("width", layout.size()[0]) 
    .attr("height", layout.size()[1]) 
.append("g") 
    .attr("transform", "translate(" + layout.size()[0]/2 + "," + layout.size()[1]/2 + ")") 
.selectAll("text") 
    .data(words) 
.enter().append("text") 
.transition() 
    .duration(function(d) { return d.time} ) 
.attr('opacity', 1) 
    .style("font-size", function(d) { return d.size + "px"; }) 
    .style("font-family", "Impact") 
    .style("fill", function(d, i) { return fill(i); }) 
    .attr("text-anchor", "middle") 
    .attr("transform", function(d) { 
    return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")"; 
    }) 

    .style("cursor", "pointer") 
    .text(function(d) { return d.text; }) 
    .on("click", function (d) {alert('ok');}); 

frequency_list список, элементы которого содержат атрибуты «текст», «размер» и «время».
Я не знаю, как это решить.
Любая помощь будет appraciated :)

Answer 1

взято из моего answer на подобный вопрос: Так как переходы представляют собой особый вид выборов, вы не можете использовать все методы, доступные для выбора на переходе. В вашем случае это означает, что вам запрещено использовать on() для регистрации обработчиков событий при переходе. Вместо этого используйте transition.each(), чтобы привязать обработчик к элементам перехода.

.transition() 
    // rest of your code 
    .each(function() { 
     d3.select(this).on("click", function (d) {alert('ok');}); 
    });