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;
+ };
+
//============================================================