diff --git a/src/config/Options.js b/src/config/Options.js index 14b53f3ef..69227c845 100644 --- a/src/config/Options.js +++ b/src/config/Options.js @@ -2060,12 +2060,18 @@ export default class Options { * select: { * r: 3 * }, + * + * // "circle", "rectangle" or "custom" for custom shapes * type: "custom", - * create(element, cssClassFn, sizeFn, fillStyleFn) { * + * // to create a custom type, set create & update functions as well + * create(element, cssClassFn, sizeFn, fillStyleFn) { + * // should create node element to be used as data point and must return a d3.selection + * return element; * }, * update(element, xPosFn, yPosFn, opacityStyleFn, fillStyleFn, withTransition, flow, selectedCircles) { - * + * // adjust the position & styles to the given element and must return a d3.selection + * return element; * } * } */ diff --git a/src/internals/shape.line.js b/src/internals/shape.line.js index b68de64c4..730102652 100644 --- a/src/internals/shape.line.js +++ b/src/internals/shape.line.js @@ -435,14 +435,12 @@ extend(ChartInternal.prototype, { $$.mainCircle.exit().remove(); - let createFn; + let createFn = $$.circle.create; if ($$.hasValidPointType()) { createFn = $$[$$.config.point_type].create; } else if ($$.hasValidPointDrawMethods()) { createFn = $$.config.point_create; - } else { - createFn = $$.circle.create; } $$.mainCircle = createFn($$.mainCircle, $$.classCircle.bind($$), $$.pointR.bind($$), $$.color) @@ -457,14 +455,12 @@ extend(ChartInternal.prototype, { return []; } - let updateFn; + let updateFn = this.circle.update; if (this.hasValidPointType()) { updateFn = this[this.config.point_type].update; } else if (this.hasValidPointDrawMethods()) { updateFn = this.config.point_update; - } else { - updateFn = this.circle.update; } const mainCircles = updateFn( @@ -526,19 +522,25 @@ extend(ChartInternal.prototype, { $$.unexpandCircles(); } - $$.getCircles(i, id) - .classed(CLASS.EXPANDED, true) - .attr("r", r); + const circles = $$.getCircles(i, id) + .classed(CLASS.EXPANDED, true); + + if ($$.config.point_type === "circle") { + circles.attr("r", r); + } }, unexpandCircles(i) { const $$ = this; const r = $$.pointR.bind($$); - $$.getCircles(i) + const circles = $$.getCircles(i) .filter(function() { return d3Select(this).classed(CLASS.EXPANDED); }) - .classed(CLASS.EXPANDED, false) - .attr("r", r); + .classed(CLASS.EXPANDED, false); + + if ($$.config.point_type === "circle") { + circles.attr("r", r); + } }, pointR(d) { diff --git a/src/internals/shape.point.js b/src/internals/shape.point.js index 6047afd9d..4468c05ad 100644 --- a/src/internals/shape.point.js +++ b/src/internals/shape.point.js @@ -5,11 +5,9 @@ import ChartInternal from "./ChartInternal"; import {isFunction, extend} from "./util"; -const POINT_TYPES = ["circle", "rectangle"]; - extend(ChartInternal.prototype, { hasValidPointType() { - return POINT_TYPES.includes(this.config.point_type); + return /^(circle|rectangle)$/i.test(this.config.point_type); }, hasValidPointDrawMethods() {