' + y + ' at ' + x + '
' + }; + + + var graph = nv.models.lineWithLegend(), + showTooltip = function(e) { + var offset = $(selector).offset(), + left = e.pos[0] + offset.left, + top = e.pos[1] + offset.top, + formatX = graph.xAxis.tickFormat(), + formatY = graph.yAxis.tickFormat(), + x = formatX(graph.x()(e.point)), + y = formatY(graph.y()(e.point)), + content = tooltip(e.series.key, x, y, e, graph); + + nvtooltip.show([left, top], content); + }; + + //setting component defaults + graph.xAxis.tickFormat(d3.format(',r')); + graph.yAxis.tickFormat(d3.format(',.2f')); + + + //TODO: consider a method more similar to how the models are built + function chart() { + if (!selector || !data.length) return chart; //do nothing if you have nothing to work with + + d3.select(selector).select('svg') + .datum(data) + .transition().duration(duration).call(graph); //consider using transition chaining like in the models + + return chart; + } + + + // This should always only be called once, then update should be used after, + // in which case should consider the 'd3 way' and merge this with update, + // but simply do this on enter... should try anoter example that way + chart.build = function() { + if (!selector || !data.length) return chart; //do nothing if you have nothing to work with + + nv.addGraph({ + generate: function() { + var container = d3.select(selector), + width = function() { return parseInt(container.style('width')) }, + height = function() { return parseInt(container.style('height')) }, + svg = container.append('svg'); + + graph + .width(width) + .height(height); + + svg + .attr('width', width()) + .attr('height', height()) + .datum(data) + .transition().duration(duration).call(graph); + + return graph; + }, + callback: function(graph) { + graph.dispatch.on('tooltipShow', showTooltip); + graph.dispatch.on('tooltipHide', nvtooltip.cleanup); + + //TODO: create resize queue and have nv core handle resize instead of binding all to window resize + $(window).resize(function() { + // now that width and height are functions, should be automatic..of course you can always override them + d3.select(selector + ' svg') + .attr('width', graph.width()()) //need to set SVG dimensions, chart is not aware of the SVG component + .attr('height', graph.height()()) + .call(graph); + }); + } + }); + + return chart; + }; + + + /* + // moved to chart() + chart.update = function() { + if (!selector || !data.length) return chart; //do nothing if you have nothing to work with + + d3.select(selector).select('svg') + .datum(data) + .transition().duration(duration).call(graph); + + return chart; + }; + */ + + chart.data = function(_) { + if (!arguments.length) return data; + data = _; + return chart; + }; + + chart.selector = function(_) { + if (!arguments.length) return selector; + selector = _; + return chart; + }; + + chart.duration = function(_) { + if (!arguments.length) return duration; + duration = _; + return chart; + }; + + chart.tooltip = function(_) { + if (!arguments.length) return tooltip; + tooltip = _; + return chart; + }; + + chart.xTickFormat = function(_) { + if (!arguments.length) return graph.xAxis.tickFormat(); + graph.xAxis.tickFormat(typeof _ === 'function' ? _ : d3.format(_)); + return chart; + }; + + chart.yTickFormat = function(_) { + if (!arguments.length) return graph.yAxis.tickFormat(); + graph.yAxis.tickFormat(typeof _ === 'function' ? _ : d3.format(_)); + return chart; + }; + + chart.xAxisLabel = function(_) { + if (!arguments.length) return graph.xAxis.axisLabel(); + graph.xAxis.axisLabel(_); + return chart; + }; + + chart.yAxisLabel = function(_) { + if (!arguments.length) return graph.yAxis.axisLabel(); + graph.yAxis.axisLabel(_); + return chart; + }; + + d3.rebind(chart, graph, 'x', 'y'); + + chart.graph = graph; // Give direct access for getter/setters, and dispatchers + + return chart; +}; + })(); diff --git a/nv.d3.min.js b/nv.d3.min.js index 79c2ef8..0988688 100644 --- a/nv.d3.min.js +++ b/nv.d3.min.js @@ -1,4 +1,4 @@ /***** * A no frills tooltip implementation. - *****/(function(a){var b=window.nvtooltip={};b.show=function(b,c,d,e){var f=a('"+c+" at "+b+"
"},f=a.models.lineWithLegend(),g=function(a){var c=$(b).offset(),d=a.pos[0]+c.left,g=a.pos[1]+c.top,h=f.xAxis.tickFormat(),i=f.yAxis.tickFormat(),j=h(f.x()(a.point)),k=i(f.y()(a.point)),l=e(a.series.key,j,k,a,f);nvtooltip.show([d,g],l)};f.xAxis.tickFormat(d3.format(",r")),f.yAxis.tickFormat(d3.format(",.2f")),h.build=function(){if(!b||!c.length)return h;a.addGraph({generate:function(){var a=d3.select(b),e=function(){return parseInt(a.style("width"))},g=function(){return parseInt(a.style("height"))},h=a.append("svg");f.width(e).height(g),h.attr("width",e()).attr("height",g()).datum(c).transition().duration(d).call(f);return f},callback:function(a){a.dispatch.on("tooltipShow",g),a.dispatch.on("tooltipHide",nvtooltip.cleanup),$(window).resize(function(){d3.select(b+" svg").attr("width",a.width()()).attr("height",a.height()()).call(a)})}});return h},h.data=function(a){if(!arguments.length)return c;c=a;return h},h.selector=function(a){if(!arguments.length)return b;b=a;return h},h.duration=function(a){if(!arguments.length)return d;d=a;return h},h.tooltip=function(a){if(!arguments.length)return e;e=a;return h},h.xTickFormat=function(a){if(!arguments.length)return f.xAxis.tickFormat();f.xAxis.tickFormat(typeof a=="function"?a:d3.format(a));return h},h.yTickFormat=function(a){if(!arguments.length)return f.yAxis.tickFormat();f.yAxis.tickFormat(typeof a=="function"?a:d3.format(a));return h},h.xAxisLabel=function(a){if(!arguments.length)return f.xAxis.axisLabel();f.xAxis.axisLabel(a);return h},h.yAxisLabel=function(a){if(!arguments.length)return f.yAxis.axisLabel();f.yAxis.axisLabel(a);return h},d3.rebind(h,f,"x","y"),h.graph=f;return h}}() \ No newline at end of file diff --git a/src/models/line.js b/src/models/line.js index d71a8f6..1702b1e 100644 --- a/src/models/line.js +++ b/src/models/line.js @@ -12,6 +12,7 @@ nv.models.line = function() { getX = function(d) { return d.x }, getY = function(d) { return d.y }, interactive = true, + clipVoronoi = true, xDomain, yDomain; var x = d3.scale.linear(), @@ -30,7 +31,6 @@ nv.models.line = function() { y0 = y0 || y; - //TODO: consider reusing the parent's scales (almost always making duplicates of the same scale) x .domain(xDomain || d3.extent(d3.merge(seriesData), getX )) .range([0, availableWidth]); @@ -62,15 +62,18 @@ nv.models.line = function() { var shiftWrap = gEnter.append('g').attr('class', 'shiftWrap'); - //TODO: currently doesnt remove if user renders, then turns off interactions... currently must turn off before the first render (will need to fix) - //TODO: have the interactive component update AFTER transitions are complete + + // destroy interactive layer during transition, + // VERY needed because of performance issues + g.selectAll('.point-clips *, .point-paths *').remove(); + + function interactiveLayer() { if (!interactive) return false; shiftWrap.append('g').attr('class', 'point-clips'); shiftWrap.append('g').attr('class', 'point-paths'); - var vertices = d3.merge(data.map(function(line, lineIndex) { return line.values.map(function(point, pointIndex) { //return [x(getX(point)), y(getY(point)), lineIndex, pointIndex]; //inject series and point index for reference into voronoi @@ -79,8 +82,7 @@ nv.models.line = function() { }) ); - - + // ***These clips are more than half the cause for the slowdown*** //var pointClips = wrap.select('.point-clips').selectAll('clipPath') // **BROWSER BUG** can't reselect camel cased elements var pointClips = wrap.select('.point-clips').selectAll('.clip-path') .data(vertices); @@ -94,21 +96,19 @@ nv.models.line = function() { //inject series and point index for reference into voronoi + // considering adding a removeZeros option, may be useful for the stacked chart and maybe others var voronoi = d3.geom.voronoi(vertices).map(function(d, i) { return { 'data': d, 'series': vertices[i][2], 'point': vertices[i][3] } }); //TODO: Add small amount noise to prevent duplicates var pointPaths = wrap.select('.point-paths').selectAll('path') .data(voronoi); - pointPaths.enter().append('path') .attr('class', function(d,i) { return 'path-'+i; }) .style('fill-opacity', 0); - pointPaths.exit().remove(); - pointPaths - .attr('clip-path', function(d,i) { return 'url(#clip-' + id + '-' + d.series + '-' + d.point +')' }) + .attr('clip-path', function(d,i) { return clipVoronoi ? 'url(#clip-' + id + '-' + d.series + '-' + d.point +')' : '' }) .attr('d', function(d) { return 'M' + d.data.join(',') + 'Z'; }) .on('mouseover', function(d) { var series = data[d.series], @@ -156,14 +156,15 @@ nv.models.line = function() { lines .attr('class', function(d,i) { return 'line series-' + i }) .classed('hover', function(d) { return d.hover }) - .style('fill', function(d,i){ return color[i % 20] }) - .style('stroke', function(d,i){ return color[i % 20] }) + .style('fill', function(d,i){ return color[i % 10] }) + .style('stroke', function(d,i){ return color[i % 10] }) d3.transition(lines) .style('stroke-opacity', 1) .style('fill-opacity', .5) - .each('end', function(d,i) { if (!i) interactiveLayer() }); //trying to call this after transitions are over.. not sure if the setTimeout is helpful, or dangerous - //.each('end', function(d,i) { if (!i) setTimeout(interactiveLayer,0) }); //trying to call this after transitions are over.. not sure if the setTimeout is helpful, or dangerous + //.each('end', function(d,i) { if (!i) setTimeout(interactiveLayer, 0) }); //trying to call this after transitions are over, doesn't work on resize! + //.each('end', function(d,i) { if (!i) interactiveLayer() }); //trying to call this after transitions are over, not sure if the timeout gains anything + setTimeout(interactiveLayer, 1000); //seems not to work as well as above... BUT fixes broken resize var paths = lines.selectAll('path') .data(function(d, i) { return [d.values] }); @@ -265,6 +266,12 @@ nv.models.line = function() { return chart; }; + chart.clipVoronoi= function(_) { + if (!arguments.length) return clipVoronoi; + clipVoronoi = _; + return chart; + }; + chart.dotRadius = function(_) { if (!arguments.length) return dotRadius; dotRadius = d3.functor(_); diff --git a/src/models/stackedArea.js b/src/models/stackedArea.js index c4e69a6..d379063 100644 --- a/src/models/stackedArea.js +++ b/src/models/stackedArea.js @@ -47,6 +47,7 @@ nv.models.stackedArea = function() { lines + //.interactive(false) .width(availableWidth) .height(availableHeight) .xDomain(x.domain())