3

D3とバックボーンを使用してリアルタイムの時系列を構築しようとしています。私が抱えている問題は、グラフの移動がx軸よりも遅いことです。x軸は現在の時刻に正確に対応しているので、グラフの線に問題があることがわかります。この例のコードは、Mike Bostock（投稿の下部にある最後のグラフ）に基づいています。問題を見つけることができないようです。私のコードは、Backboneで実装されただけで、例に厳密に従っています。

アプリはWebSocketとイベントアグリゲーターでセットアップされているため、新しいデータポイントを受信すると、データポイントのモデルがコレクションに追加され、モデルを追加すると、「TimeseriesView」ビュー内で関数「newPoint」がトリガーされます。「newPoint」は数値を配列「data」にプッシュします。これは、グラフ化された線のデータの取得元です。これが関連するビューです。（コードが少し面倒な場合は失礼します-私はBackboneを初めて使用するので、これを行うためのよりクリーンな方法があると思います）

TimeseriesView = Backbone.View.extend({
    el: "#timeseries",
    initialize: function (options) {
        var self = this;
        /*
         * Create timeseries
         */
        self.n = 243;
        self.duration = 750;
        self.now = new Date(Date.now() - self.duration);
        self.data = d3.range(self.n).map(function() { return 0; });

        self.margin = { top: 6, right: 0, bottom: 20, left: 40};
        self.width = 960 - self.margin.right;
        self.height = 120 - self.margin.top - self.margin.bottom;

        self.x = d3.time.scale()
            .domain([self.now - (self.n-2) * self.duration, self.now - self.duration])
            .range([0, self.width]);

        self.y = d3.scale.linear()
            .range([self.height, 0]);

        var x = self.x;
        var y = self.y;
        var now = self.now;
        var duration = self.duration;
        var n = self.n;
        var height = self.height;
        var width = self.width;
        var margin = self.margin;

        self.line = d3.svg.line()
            .x(function(d, i) { return x(now - (n - 1 - i) * duration); })
            .y(function(d, i) { return y(d); });

        var timeseries = d3.select("#timeseries").append("p").append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
          .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")")

        timeseries.append("defs").append("clipPath")
            .attr("id", "clip")
          .append("rect")
            .attr("width", width)
            .attr("height", height);

        self.x.axis = d3.svg.axis().scale(x).orient("bottom");

        self.axis = timeseries.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + height + ")")
            .call(x.axis);


        self.path = timeseries.append("g")
            .attr("clip-path", "url(#clip)")
          .append("path")
            .data([self.data])
            .attr("class", "line");

        self.dataSet = options.dataSet;
        self.dataSet.on('add', this.newPoint, this);
    },
    newPoint: function (pt, context) {
        var self = this;
        if (isNaN(parseFloat(pt.attributes.auth_amt))) return;
        self.data.push(parseFloat(pt.attributes.auth_amt));

        self.now = new Date();

        var now = self.now;
        var duration = self.duration;
        var n = self.n;
        var x = self.x;
        var y = self.y;
        var width = this.width;
        var height = this.height;
        console.log('self', self);
        x.axis = d3.svg.axis().scale(x).orient("bottom");

        // update the domains
        self.x.domain([now - (n - 2) * duration,
                now - duration]);
        self.y.domain([0, d3.max(self.data)]); 

        self.line = d3.svg.line()
            .x(function(d, i) {
                return x(now - (n - 1 - i) * duration); })
            .y(function(d, i) { return y(d); });

        // redraw the line
        d3.select(".line")
            .attr("d", self.line)
            .attr("transform", null);

        // slide the x-axis to the left
        self.axis.transition()
            .duration(duration)
            .ease("linear")
            .call(x.axis);

        self.x = d3.time.scale()
            .domain([now - (n-2) * duration, now - duration])
            .range([0, width]);

        var x = self.x;

        // slide the line left
        self.path.transition()
            .duration(duration)
            .ease("linear")
            .attr("transform", "translate(" +  x(now - (n - 1) * duration) + ")");

        // pop the old dat point off the front
        self.data.shift();
    }
});
4

1 に答える 1

1

コードの基にした例は、x 軸のスライドとデータの追加が深く絡み合っています。例のように何かをポーリングすると問題なく動作しますが、websocket セットアップで行うと思われるように、データが異なる間隔またはランダムに到着する場合はそれほど多くありません ( http://jsfiddle.net/K8rub/1/を参照してください)。できればコードを正確に再現してください)

最初に行うことは、スライディング (tick関数) とデータ インジェクションを分離することです: http://jsfiddle.net/K8rub/2/ : 各データには x 値を抽出するために使用されるタイムスタンプがあり、データは最初は空でtick、グラフをスライドするだけです。

これらの変更をコードに適用すると、

TimeseriesView = Backbone.View.extend({

    initialize: function (options) {
        _.bindAll(this, 'tick');

       // ...

        self.dataSet = options.dataSet;
        self.dataSet.on('add', this.newPoint, this);
        self.tick();
    },

    newPoint: function(model) {
        this.data.push(model);
    },

    tick: function () {
        var self = this;
        self.now = new Date();

        var now = self.now;
        var duration = self.duration;
        var n = self.n;
        var x = self.x;
        var y = self.y;
        var width = this.width;
        var height = this.height;

        x.axis = d3.svg.axis().scale(x).orient("bottom");

        // update the domains
        self.x.domain([now - (n - 2) * duration,
                now - duration]);
        self.y.domain([0, d3.max(self.dataSet.pluck('auth_amt'))]); 


        self.line = d3.svg.line()
            .x(function(d) { return x(d.get('stamp')); })
            .y(function(d) { return y(d.get('auth_amt')); });

        // redraw the line
        d3.select(".line")
            .attr("d", self.line)
            .attr("transform", null);

        // slide the x-axis to the left
        self.axis.transition()
            .duration(duration)
            .ease("linear")
            .call(x.axis);

        self.x = d3.time.scale()
            .domain([now - (n-2) * duration, now - duration])
            .range([0, width]);

        var x = self.x;

        // slide the line left
        self.path.transition()
            .duration(duration)
            .ease("linear")
            .attr("transform", "translate(" +  x(now - (n - 1) * duration) + ")")
            .each("end", self.tick);
    }
});

http://jsfiddle.net/K8rub/4/

于 2013-03-02T16:20:42.063 に答える