diff --git a/examples/lineWithFocusChart.html b/examples/lineWithFocusChart.html index 0f3c9d6..c5278a1 100644 --- a/examples/lineWithFocusChart.html +++ b/examples/lineWithFocusChart.html @@ -52,6 +52,7 @@ svg { nv.addGraph(function() { var chart = nv.models.lineWithFocusChart(); + // chart.transitionDuration(500); chart.xAxis .tickFormat(d3.format(',f')); chart.x2Axis @@ -64,7 +65,6 @@ nv.addGraph(function() { d3.select('#chart svg') .datum(testData()) - .transition().duration(500) .call(chart); nv.utils.windowResize(chart.update); diff --git a/src/models/lineWithFocusChart.js b/src/models/lineWithFocusChart.js index e8c152b..3985ffa 100644 --- a/src/models/lineWithFocusChart.js +++ b/src/models/lineWithFocusChart.js @@ -34,6 +34,7 @@ nv.models.lineWithFocusChart = function() { } , noData = "No Data Available." , dispatch = d3.dispatch('tooltipShow', 'tooltipHide', 'brush') + , transitionDuration = 250 ; lines @@ -87,7 +88,7 @@ nv.models.lineWithFocusChart = function() { - margin.top - margin.bottom - height2, availableHeight2 = height2 - margin2.top - margin2.bottom; - chart.update = function() { container.transition().call(chart) }; + chart.update = function() { container.transition().duration(transitionDuration).call(chart) }; chart.container = this; @@ -249,7 +250,13 @@ nv.models.lineWithFocusChart = function() { brush .x(x2) - .on('brush', onBrush); + .on('brush', function() { + //When brushing, turn off transitions because chart needs to change immediately. + var oldTransition = chart.transitionDuration(); + chart.transitionDuration(0); + onBrush(); + chart.transitionDuration(oldTransition); + }); if (brushExtent) brush.extent(brushExtent); @@ -392,13 +399,13 @@ nv.models.lineWithFocusChart = function() { } }) ); - d3.transition(focusLinesWrap).call(lines); + focusLinesWrap.transition().duration(transitionDuration).call(lines); // Update Main (Focus) Axes - d3.transition(g.select('.nv-focus .nv-x.nv-axis')) + g.select('.nv-focus .nv-x.nv-axis').transition().duration(transitionDuration) .call(xAxis); - d3.transition(g.select('.nv-focus .nv-y.nv-axis')) + g.select('.nv-focus .nv-y.nv-axis').transition().duration(transitionDuration) .call(yAxis); } @@ -547,6 +554,12 @@ nv.models.lineWithFocusChart = function() { return chart; }; + chart.transitionDuration = function(_) { + if (!arguments.length) return transitionDuration; + transitionDuration = _; + return chart; + }; + //============================================================