词云无法使用onClick

Question

我正在使用 Jason Davies 构建词云 d3.layout.cloud() https://github.com/jasondavies/d3-cloud.git
我决定添加一个 transition 和 duration 属性，使 wordcloud 在屏幕上看起来更好看。但是，我不能再使用 on("click") 属性，因为它向我发送了一个错误：
未捕获的类型错误：未定义不是函数
它指的是行 .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 是一个列表，其元素包含属性 "text"、"size" 和 "time"。
我不知道如何解决这个问题。
任何帮助将不胜感激:)

Answer 1

摘自我的 to a similar question: Since transitions are a special kind of selections, you cannot use all methods available to a selection on a transition. In your case this means, you are not allowed to use on() to register event handlers on a transition. Instead, use transition.each() 以将您的处理程序绑定到过渡中的元素。

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

词云无法使用onClick

Word cloud unable to use onClick

javascript

word-cloud

d3.js