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

Question

我正在尝试使用 D3 和 Backbone 构建一个实时时间序列。我遇到的问题是图形移动速度比 x 轴慢。 x 轴准确地跟上当前时间，所以我知道这是图形线的问题。我的代码基于 this 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();
    }
});

Answer 1

您的代码所基于的示例与滑动 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/