立体主义:系列不渲染,但获取数字值

时间:2013-04-29 20:02:04

标签: javascript backbone.js d3.js cubism.js

尝试使用Cubism和D3编写简单的可视化。不可否认,我对使用立体主义和D3很新,而立体主义文档很难理解。

轮询URL的数值以检索'rate',然后将值推送到数组中,如示例所示。画布的东西不会渲染,最初,Cubism.js示例中的数值也不会。过了一会儿,会出现一个反映最新轮询值的数字。调试JavaScript确实会显示数组随着时间的推移而扩展。

任何有助于更好地理解问题的人都将不胜感激。

render: function() {
  var thatElement = this.el;

  function update(model) {
    var values = [];

    return context.metric(function(start, stop, step, callback) {
      model.fetch();
      var data = model.toJSON();
      if (data[0]) values.push(parseInt(data[0]));
      callback(null, values = values.slice(-context.size()));
    }, "Rate");
  }

  var context = cubism.context()
                .serverDelay(0)
                .clientDelay(0)
                .step(5000);

  var foo = update(this.model);

  d3.select(thatElement).append("div").call(function(div) {
    div.append("div")
      .attr("class", "axis")
      .call(content.axis().orient("top"));

    div.selectAll(".horizon")
        .data([foo])
      .enter().append("div")
        .attr("class", "horizon")
        .call(context.horizon());
    div.append("div")
        .attr("class", "rule")
        .call(context.rule());
  });
}

另外,注意到如果我在其他视图中调用cubism.context(),它会破坏前面的视图。

1 个答案:

答案 0 :(得分:0)

尝试通过使用类“horizo​​n”在基本HTML文件中编写div元素来调试问题。我也遇到了同样的问题但是这个div操作在几秒钟内解决了它。