diff --git a/demo/demo.js b/demo/demo.js index 5b05d9517..fdbc74221 100644 --- 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; } } }