nv.models.sparkline = function() { var margin = {top: 0, right: 0, bottom: 0, left: 0}, width = 400, height = 32, animate = true, getX = function(d) { return d.x }, getY = function(d) { return d.y }, color = d3.scale.category20().range(), xDomain, yDomain; var x = d3.scale.linear(), y = d3.scale.linear(); function chart(selection) { selection.each(function(data) { var availableWidth = width - margin.left - margin.right, availableHeight = height - margin.top - margin.bottom; x .domain(xDomain || d3.extent(data, getX )) .range([0, availableWidth]); y .domain(yDomain || d3.extent(data,getY )) .range([availableHeight, 0]); var wrap = d3.select(this).selectAll('g.sparkline').data([data]); var gEnter = wrap.enter().append('g'); //var gEnter = svg.enter().append('svg').append('g'); gEnter.append('g').attr('class', 'sparkline') .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')') //.style('fill', function(d, i){ return d.color || color[i * 2 % 20] }) .style('stroke', function(d, i){ return d.color || color[i * 2 % 20] }); d3.select(this) .attr('width', width) .attr('height', height); var paths = gEnter.select('.sparkline').selectAll('path') .data(function(d) { return [d] }); paths.enter().append('path'); paths.exit().remove(); paths .attr('d', d3.svg.line() .x(function(d) { return x(getX(d)) }) .y(function(d) { return y(getY(d)) }) ); // TODO: Add CURRENT data point (Need Min, Mac, Current / Most recent) var points = gEnter.select('.sparkline').selectAll('circle.point') .data(function(d) { return d.filter(function(p) { return y.domain().indexOf(p.y) != -1 }) }); points.enter().append('circle').attr('class', 'point'); points.exit().remove(); points .attr('cx', function(d) { return x(getX(d)) }) .attr('cy', function(d) { return y(getY(d)) }) .attr('r', 2) .style('stroke', function(d, i){ return d.y == y.domain()[0] ? '#d62728' : '#2ca02c' }) .style('fill', function(d, i){ return d.y == y.domain()[0] ? '#d62728' : '#2ca02c' }); }); return chart; } chart.margin = function(_) { if (!arguments.length) return margin; margin = _; return chart; }; chart.width = function(_) { if (!arguments.length) return width; width = _; return chart; }; chart.height = function(_) { if (!arguments.length) return height; height = _; return chart; }; chart.x = function(_) { if (!arguments.length) return getX; getX = d3.functor(_); return chart; }; chart.y = function(_) { if (!arguments.length) return getY; getY = d3.functor(_); return chart; }; chart.xDomain = function(_) { if (!arguments.length) return xDomain; xDomain = _; return chart; }; chart.yDomain = function(_) { if (!arguments.length) return yDomain; yDomain = _; return chart; }; chart.animate = function(_) { if (!arguments.length) return animate; animate = _; return chart; }; return chart; }