Databases
StackOverflow2013
Postsdbo
POReal-time D3 timeseries using Backbone -- graph moves slower than axis
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POReal-time D3 timeseries using Backbone -- graph moves slower than axis
    text
    copied!<p>I'm trying to build a real-time timeseries with D3 and Backbone. The problem I'm having is that the graph moves slower than the x-axis. The x-axis is keeping up with the current time accurately, so I know it's an issue with the graphed line. I'm basing the code off of <a href="http://bost.ocks.org/mike/path/" rel="nofollow">this</a> example by Mike Bostock (the last graph at the bottom of the post). I can't seem to find the problem -- my code follows the example closely, just implemented with Backbone.</p> <p>The app is set up with a websocket and event aggregator so that when a new data point is received, a model of the data point is added to a collection, and adding a model triggers the function "newPoint" within the "TimeseriesView" view. "newPoint" pushes a number to an array, "data", and this is where the data for the graphed line comes from. Here is the relevant view. (Please excuse the code if it's a bit messy -- I'm new to Backbone, so I suspect there's a cleaner way to do this)</p> <pre><code>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(); } }); </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload