feat(shape.line): Update demo

naver · Nov 7, 2017 · e923eda · e923eda
1 parent 8b710d7
commit e923eda
Showing 1 changed file with 28 additions and 27 deletions.
diff --git a/demo/demo.js b/demo/demo.js
@@ -2632,7 +2632,7 @@ var demos = {
 				}
 			}
 		},
-		TriangleForPoints: {
+		CustomShapesForPoints: {
 			options: {
 				data: {
 					columns: [
@@ -2641,36 +2641,37 @@ var demos = {
 					]
 				},
 				point: {
-					type: "custom",
-
-					create(element, cssClassFn, sizeFn, fillStyle) {
-						return element.enter().append("polygon")
-							.attr("class", cssClassFn)
-							.style("fill", fillStyle);
-					},
+					type: {
+						create(element, cssClassFn, sizeFn, fillStyle) {
+							return element.enter().append("polygon")
+								.attr("class", cssClassFn)
+								.style("fill", fillStyle);
+						},
 
-					update(element, xPosFn, yPosFn, opacityStyleFn, fillStyleFn,
-						withTransition, flow, selectedCircles) {
-						let mainCircles;
-						const triangleSize = 10;
+						update(element, xPosFn, yPosFn, opacityStyleFn, fillStyleFn,
+									withTransition, flow, selectedCircles) {
+							let mainCircles;
+							const triangleSize = 10;
+
+							function getPoints(d) {
+								const x1 = xPosFn(d);
+								const y1 = yPosFn(d) - (triangleSize * 0.5);
+								const x2 = x1 - (triangleSize * 0.5);
+								const y2 = y1 + (triangleSize * 0.5);
+								const x3 = x1;
+								const y3 = y2 + (triangleSize * 0.5);
+								const x4 = x1 + (triangleSize * 0.5);
+								const y4 = y2;
+								return `${x1} ${y1} ${x2} ${y2} ${x3} ${y3} ${x4} ${y4}`;
+							}
 
-						function getPoints(d) {
-							const x1 = xPosFn(d);
-							const y1 = yPosFn(d) - (triangleSize * 0.5);
-							const x2 = x1 - (triangleSize * 0.5);
-							const y2 = y1 + triangleSize;
-							const x3 = x1 + (triangleSize * 0.5);
-							const y3 = y2;
+							mainCircles = element
+								.attr("points", getPoints)
+								.style("opacity", opacityStyleFn)
+								.style("fill", fillStyleFn);
 
-							return `${x1} ${y1} ${x2} ${y2} ${x3} ${y3}`;
+							return mainCircles;
 						}
-
-						mainCircles = element
-							.attr("points", getPoints)
-							.style("opacity", opacityStyleFn)
-							.style("fill", fillStyleFn);
-
-						return mainCircles;
 					}
 				}
 			}