fix(label): Correct newly added texts transition position

Check x attribute value for newly added data label text element
to be excluded from the transition

Ref #648
Close #718

spec/internals/data-spec.js

@@ -1398,6 +1398,51 @@ describe("DATA", () => {
 				expect(points.size()).to.be.equal(0);
 			});
 		});
+
+		describe("text transition", () => {
+			before(() => {
+				args = {
+					data: {
+						columns: [
+							["data1", 30, 200, 100],
+							["data2", 130, 100, 140]
+						],
+						labels: true
+					}
+				};
+			});
+
+			it("newly added text shouldn't be transitioning from the top/left", done => {
+				const main = chart.$.main;
+				const pos = [];
+				let text;
+				let interval;
+
+				setTimeout(() => {
+					interval = setInterval(() => {
+						text = main.select(`.${CLASS.texts}-data2 .${CLASS.text}-3`);
+						pos.push(+text.attr("x"));
+					}, 20);
+
+					chart.load({
+						columns: [
+							["data2", 44, 134, 98, 170]
+						],
+						done: function () {
+							setTimeout(() => {
+								clearInterval(interval);
+								const currPos = +text.attr("x");
+
+								expect(Math.round(pos[0])).to.not.equal(0);
+								expect(pos.every(v => v === currPos)).to.be.true;
+
+								done();
+							}, 500);
+						}
+					});
+				}, 500);
+			});
+		});
 	});
 
 	describe("inner functions", () => {

spec/shape/shape.point-spec.js

@@ -146,5 +146,5 @@ describe("SHAPE POINT", () => {
 				});
 			}, 500);
 		});
-	})
+	});
 });

src/internals/text.js

@@ -8,7 +8,7 @@ import {
 } from "d3-selection";
 import ChartInternal from "./ChartInternal";
 import CLASS from "../config/classes";
-import {extend, isNumber} from "./util";
+import {extend, getRandom, isNumber} from "./util";
 
 extend(ChartInternal.prototype, {
 	/**
@@ -88,12 +88,21 @@ extend(ChartInternal.prototype, {
 	 * @returns {Object} $$.mainText
 	 */
 	redrawText(xForText, yForText, forFlow, withTransition) {
+		const $$ = this;
+		const t = getRandom();
+		const opacityForText = forFlow ? 0 : $$.opacityForText.bind($$);
+
 		return [
-			(withTransition ? this.mainText.transition() : this.mainText)
-				.attr("x", xForText)
-				.attr("y", yForText)
-				.style("fill", this.color)
-				.style("fill-opacity", forFlow ? 0 : this.opacityForText.bind(this))
+			this.mainText.each(function() {
+				const text = d3Select(this);
+
+				// do not apply transition for newly added text elements
+				(withTransition && text.attr("x") ? text.transition(t) : text)
+					.attr("x", xForText)
+					.attr("y", yForText)
+					.style("fill", $$.color)
+					.style("fill-opacity", opacityForText);
+			})
 		];
 	},