javascript - Word云无法使用onClick

javascript - Word云无法使用onClick,第1张

我正在使用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” 我不知道如何解决这个问题 任何帮助都会被评估:)

最佳答案:

1 个答案:

答案 0 :(得分:1)

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

.transition()
    // rest of your code
    .each(function () {
        d3.select(this).on("click", function (d) {alert('ok');});
    });
本文经用户投稿或网站收集转载,如有侵权请联系本站。

发表评论

0条回复