javascript - Word cloud unable to use onClick -


i'm building wordcloud using jason davies d3.layout.cloud() https://github.com/jasondavies/d3-cloud.git
decided add transition , duration attributes make wordcloud better when arrives on screen . however, can't use on("click") attribute anymore since sends me error :
uncaught typeerror: undefined not function
refers line .on("click", function (d) {alert('ok');})
when remove transition , duration, on click works correctly .
here js code :

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 list elements contain attributes "text", "size", , "time" .
don't know how solve .
appraciated :)

taken answer similar question: since transitions special kind of selections, cannot use methods available selection on transition. in case means, not allowed use on() register event handlers on transition. instead, use transition.each() bind handler elements in transition.

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

Comments

Popular posts from this blog

yii2 - Yii 2 Running a Cron in the basic template -

asp.net - 'System.Web.HttpContext' does not contain a definition for 'GetOwinContext' Mystery -

wso2esb - How to concatenate JSON array values in WSO2 ESB? -