带有主干.js 的 D3-cloud

Question

我打算用d3-cloud生成一个词云，尝试如下使用 在具有主干视图的 Rails 应用程序中。我是 d3 的初学者，如果问题很愚蠢，请原谅。

来自https://github.com/jasondavies/d3-cloud/blob/master/examples/simple.html

我不断收到此错误 未捕获的类型错误：对象渲染没有“应用”方法

我的 Api 返回结果如下。

[{"text":"Timmy Doe","size":100},{"text":"John Doe","size":50}]

class Mongoauth.Views.TagCloud extends Backbone.View
  id = 0
  defaults: {
    w: 1,
    h: 5
  }
  initialize:->
      _.bindAll(this,"render");
      @collection.bind("reset",this.render);
      @collection.bind("change", this.render);
      this.chart = d3.layout.cloud().size([300, 300]).words(@collection.models).padding(5).rotate(->
                      ~~(Math.random() * 2) * 90
                    ).font("Impact").fontSize((d) ->
                      d.size
                    ).on("end", "render").start()
      # this.chart = d3.select(this.el).append('svg').attr("width", 300)
      #       .attr("height", 200) 
      #       .attr("viewBox","0 0 100 100");
      console.log(@collection)

  render: ->
      d3.select(this.el).append("svg").attr("width", 300).attr("height", 300).append("g").attr("transform", "translate(150,150)").selectAll("text").data(this.collection.models).enter().append("text").style("font-size", (d) ->
        d.size + "px"
      ).style("font-family", "Impact").style("fill", (d, i) ->
        d3.scale.category20() i
      ).attr("text-anchor", "middle").attr("transform", (d) ->
        "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")"
      ).text (d) ->
        d.text
      this

Answer 1

您正在传递一个字符串作为.on("end", "render").start() 行上的事件侦听器。必须是函数引用（如this.render）。