带骨干.js的 D3 云

D3-cloud with backbone.js

本文关键字：D3 js      更新时间：2023-09-26

>我打算使用 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
您将字符串

作为事件侦听器传递到第 .on("end", "render").start() 行上。 它需要是一个函数引用（例如 this.render ）。

相关文章：