Rickshaw.namespace('Rickshaw.Graph.Renderer.LinePlot'); Rickshaw.Graph.Renderer.LinePlot = Rickshaw.Class.create( Rickshaw.Graph.Renderer, { name: 'lineplot', defaults: function($super) { return Rickshaw.extend( $super(), { unstack: true, fill: false, stroke: true, padding:{ top: 0.01, right: 0.01, bottom: 0.01, left: 0.01 }, dotSize: 3, strokeWidth: 2 } ); }, initialize: function($super, args) { $super(args); }, seriesPathFactory: function() { var graph = this.graph; var factory = d3.svg.line() .x( function(d) { return graph.x(d.x) } ) .y( function(d) { return graph.y(d.y) } ) .interpolate(this.graph.interpolation).tension(this.tension); factory.defined && factory.defined( function(d) { return d.y !== null } ); return factory; }, _renderDots: function() { var graph = this.graph; graph.series.forEach(function(series) { if (series.disabled) return; var nodes = graph.vis.selectAll("x") .data(series.stack.filter( function(d) { return d.y !== null } )) .enter().append("svg:circle") .attr("cx", function(d) { return graph.x(d.x) }) .attr("cy", function(d) { return graph.y(d.y) }) .attr("r", function(d) { return ("r" in d) ? d.r : graph.renderer.dotSize}); Array.prototype.forEach.call(nodes[0], function(n) { if (!n) return; n.setAttribute('data-color', series.color); n.setAttribute('fill', 'white'); n.setAttribute('stroke', series.color); n.setAttribute('stroke-width', this.strokeWidth); }.bind(this)); }, this); }, _renderLines: function() { var graph = this.graph; var nodes = graph.vis.selectAll("path") .data(this.graph.stackedData) .enter().append("svg:path") .attr("d", this.seriesPathFactory()); var i = 0; graph.series.forEach(function(series) { if (series.disabled) return; series.path = nodes[0][i++]; this._styleSeries(series); }, this); }, render: function() { var graph = this.graph; graph.vis.selectAll('*').remove(); this._renderLines(); this._renderDots(); } } );