Question

我正在使用Jason Davies构建一个wordcloud d3.layout.cloud（）https://github.com/jasondavies/d3-cloud.git
我决定添加一个转换和持续时间属性，以使wordcloud在到达屏幕时看起来更好。但是，我不能再使用on（“click”）属性了，因为它给我发了一个错误：
未捕获的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是一个列表，其元素包含属性“text”，“size”和“time” 我不知道如何解决这个问题任何帮助都会被评估：）

Answer 1

从我的answer转到类似的问题：由于转换是一种特殊的选择，因此您无法在转换时使用所有可用的方法。在您的情况下，这意味着，您不能使用on()在转换上注册事件处理程序。相反，使用transition.each()将处理程序绑定到转换中的元素。

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

Word云无法使用onClick

1 个答案: