fix(arc): Fix shape rendering when data id equivalent of color string

For interpolation, make sure to be applied only necessary values.
Issue happened because colorish string were interpolated, which transformed
id values as interpolated color string.

Fix #3321

src/ChartInternal/shape/arc.ts

@@ -114,14 +114,24 @@ function getRadiusFn(expandRate = 0) {
  */
 function getAttrTweenFn(fn: (d: IArcData) => string) {
 	return function(d: IArcData): (t: number) => string {
-		const interpolate = d3Interpolate(this._current, d);
+		const getAngleKeyValue = ({startAngle = 0, endAngle = 0, padAngle = 0}) => ({
+			startAngle, endAngle, padAngle
+		});
+
+		// d3.interpolate interpolates id value, if id is given as color string(ex. gold, silver, etc)
+		// to avoid unexpected behavior, interpolate only angle values
+		// https://github.com/naver/billboard.js/issues/3321
+		const interpolate = d3Interpolate(
+			getAngleKeyValue(this._current), getAngleKeyValue(d)
+		);
 
 		this._current = d;
 
 		return function(t: number): string {
-			const interpolated = interpolate(t);
+			const interpolated = interpolate(t) as IArcData;
+			const {data, index, value} = d;
 
-			return fn(interpolated);
+			return fn({...interpolated, data, index, value});
 		};
 	};
 }
@@ -310,7 +320,7 @@ export default {
 			.innerRadius(inner)
 			.outerRadius(outer);
 
-		const newArc = function(d, withoutUpdate) {
+		const newArc = function(d: IArcData, withoutUpdate) {
 			let path: string | null = "M 0 0";
 
 			if (d.value || d.data) {

test/shape/arc-spec.ts

@@ -879,5 +879,31 @@ describe("SHAPE ARC", () => {
 				i++;
 			}, 15);
 		});
+
+		it("when colorish string value is used as data name", done => {
+			const chart = util.generate({
+				data: {
+					columns: [
+						["data1", 30],
+						["red", 120]
+					],
+					type: "donut"
+				},
+				onafterinit: function() {
+					setTimeout(() => {
+						this.focus("red");
+					}, 300);
+
+					setTimeout(() => {
+						const d = this.$.arc.select(".bb-arc-red").attr("d");
+
+						// shape shouldn't be an empty path
+						expect(d).to.not.be.equal("M 0 0");
+
+						done();
+					}, 500);
+				}
+			});			
+		});
 	});
 });