From 9088064e329a8085743b715036a8b755a8771932 Mon Sep 17 00:00:00 2001
From: Paul Mach <paulmach@gmail.com>
Date: Fri, 8 Jul 2016 18:15:36 -0700
Subject: [PATCH] Transition line-chart dots along with the lines

---
 spec/line-chart-spec.js | 5 ++++-
 src/line-chart.js       | 8 +++++---
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/spec/line-chart-spec.js b/spec/line-chart-spec.js
index 3923e70d1..d4bb518cf 100644
--- a/spec/line-chart-spec.js
+++ b/spec/line-chart-spec.js
@@ -1,4 +1,4 @@
-/* global appendChartID, loadDateFixture, makeDate */
+/* global appendChartID, flushAllD3Transitions, loadDateFixture, makeDate */
 describe('dc.lineChart', function () {
     var id, chart, data;
     var dimension, group;
@@ -224,6 +224,7 @@ describe('dc.lineChart', function () {
                     describe('for vertical ref lines', function () {
                         var x;
                         beforeEach(function () {
+                            flushAllD3Transitions();
                             var dot = chart.select('circle.dot');
                             dot.on('mousemove').call(dot[0][0]);
                             x = dot.attr('cx');
@@ -240,6 +241,7 @@ describe('dc.lineChart', function () {
                         describe('for a left y-axis chart', function () {
                             var x;
                             beforeEach(function () {
+                                flushAllD3Transitions();
                                 var dot = chart.select('circle.dot');
                                 dot.on('mousemove').call(dot[0][0]);
                                 x = dot.attr('cx');
@@ -256,6 +258,7 @@ describe('dc.lineChart', function () {
                             var x;
                             beforeEach(function () {
                                 chart.useRightYAxis(true).render();
+                                flushAllD3Transitions();
                                 var dot = chart.select('circle.dot');
                                 dot.on('mousemove').call(dot[0][0]);
                                 x = dot.attr('cx');
diff --git a/src/line-chart.js b/src/line-chart.js
index 26ae98dff..20aa399f8 100644
--- a/src/line-chart.js
+++ b/src/line-chart.js
@@ -288,6 +288,7 @@ dc.lineChart = function (parent, chartGroup) {
                     .attr('r', getDotRadius())
                     .style('fill-opacity', _dataPointFillOpacity)
                     .style('stroke-opacity', _dataPointStrokeOpacity)
+                    .attr('fill', _chart.getColor)
                     .on('mousemove', function () {
                         var dot = d3.select(this);
                         showDot(dot);
@@ -299,15 +300,16 @@ dc.lineChart = function (parent, chartGroup) {
                         hideRefLines(g);
                     });
 
-                dots
+                dots.call(renderTitle, d)
+                    .transition()
+                    .duration(_chart.transitionDuration())
                     .attr('cx', function (d) {
                         return dc.utils.safeNumber(_chart.x()(d.x));
                     })
                     .attr('cy', function (d) {
                         return dc.utils.safeNumber(_chart.y()(d.y + d.y0));
                     })
-                    .attr('fill', _chart.getColor)
-                    .call(renderTitle, d);
+                    .attr('fill', _chart.getColor);
 
                 dots.exit().remove();
             });