backbone.js - 使用Backbone的实时D3时间序列-图形移动得比轴慢

我正在尝试使用D3和Backbone构建实时时间序列。我遇到的问题是图形的移动速度比x轴慢。 x轴准确地跟上了当前时间，因此我知道这与图形线有关。我基于Mike Bostock的this示例创建代码(该帖子底部的最后一张图)。我似乎找不到问题-我的代码紧随该示例，仅使用Backbone实现。

该应用程序通过websocket和事件聚合器进行了设置，以便在接收到新数据点时，将数据点的模型添加到集合中，并且添加模型会触发“TimeseriesView” View 中的函数“newPoint”。 “newPoint”将数字推入数组“data”，这是图形行数据的来源。这是相关 View 。 (如果代码有点凌乱，请原谅，因为我是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();
    }
});

最佳答案

您的代码示例基于将x轴滑动和添加数据深度交织在一起的示例。当您像示例中那样轮询某些东西时，它工作得很好，而不是像我想的那样在Websocket设置中，它以不同的间隔或随机到达的数据(请参阅http://jsfiddle.net/K8rub/1/以获得希望的代码精确复制)

首先要做的是将滑动(tick函数)和数据注入(inject)分开: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/

关于backbone.js - 使用Backbone的实时D3时间序列-图形移动得比轴慢，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/14783528/