var LineChart = function LineChart() { // OPTIONS // ------- var options = {}; options.margin = { top: 10, right: 10, bottom: 10, left: 10 }; options.width = 600 - options.margin.left - options.margin.right; options.height = 140 - options.margin.top - options.margin.bottom; // SCALES // ------ var scales = {}; scales.x = d3.time.scale().range([0, options.width]); scales.y = d3.scale.linear().range([options.height, 0]); scales.color = d3.scale.category10(); // LINE // ---- var line = d3.svg.line() .interpolate('basis') .x(function(d) { return scales.x(d.timestamp); }) .y(function(d) { return scales.y(d.value); }); // INIT // ---- // svg container var svg = d3.select('#line-chart') .append('svg') .attr('width', options.width + options.margin.left + options.margin.right) .attr('height', options.height + options.margin.top + options.margin.bottom); // translate with margins var canvas = svg.append('g') .attr('transform', 'translate(' + options.margin.left + ',' + options.margin.right + ')'); // clipping path canvas.append('defs').append('clipPath') .attr('id', 'clip') .append('rect') .attr('width', options.width) .attr('height', options.height); // DRAW // ---- this.draw = function draw(data) { // DOMAINS // ------- scales.x.domain([ d3.min(data, function(dp) { return d3.min(dp, function(d) { return d.timestamp; }); }) + 60000, d3.max(data, function(dp) { return d3.max(dp, function(d) { return d.timestamp; }); }) - 60000 ]); //console.info(scales.x.domain()); scales.y.domain([ d3.min(data, function(dp) { return d3.min(dp, function(d) { return d.value; }); }), d3.max(data, function(dp) { return d3.max(dp, function(d) { return d.value; }); }) ]); // UPDATE // ------ // create series g container and paths inside canvas.selectAll('.series') .data(data) .enter() .append('g') .attr('clip-path', 'url(#clip)') .attr('class', 'series') .append('path') .attr('class', 'line') .attr('stroke', function(d, i) { return scales.color(i); }); /* canvas.selectAll('.line') .transition() .duration(600) .attr('d', function(d) { return line(d); }); */ canvas.selectAll('.line') .attr('d', function(d) { return line(d); }) .attr('transform', null) .transition() .duration(1000) .ease('linear') .attr('transform', function(d) { return 'translate(' + scales.x(d[0].timestamp - 60000) + ')'; }); }; };