0

Cubism と D3 を使用して簡単なビジュアライゼーションを作成しようとしています。確かに、私は Cubism と D3 を使用するのにかなり慣れていないため、Cubism のドキュメントは非常に理解しにくいものです。

数値の URL をポーリングして「レート」を取得し、例のように値を配列にプッシュします。キャンバスはレンダリングされず、最初は 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() を呼び出すと、前のビューが壊れることに気付きました。

4

1 に答える 1

0

クラス「horizo​​n」を使用してベースHTMLファイルにdiv要素を記述して、問題をデバッグしてみてください。私も同じ問題に直面していましたが、このdiv操作を行うと数秒で解決しました。

于 2014-05-14T14:14:50.897 に答える