diff --git a/src/ChartInternal/shape/point.ts b/src/ChartInternal/shape/point.ts index b9d787a82..b7928418b 100644 --- a/src/ChartInternal/shape/point.ts +++ b/src/ChartInternal/shape/point.ts @@ -447,7 +447,6 @@ export default { return function(method, context, ...args) { return function(d) { const id: string = $$.getTargetSelectorSuffix(d.id || (d.data && d.data.id) || d); - const element = d3Select(this); ids.indexOf(id) < 0 && ids.push(id); @@ -457,7 +456,7 @@ export default { if ($$.hasValidPointType(point)) { point = $$[point]; } else if (!$$.hasValidPointDrawMethods(point)) { - const pointId = `${datetimeId}-point-${id}`; + const pointId = `${datetimeId}-point${id}`; const pointFromDefs = $$.pointFromDefs(pointId); if (pointFromDefs.size() < 1) { diff --git a/test/internals/legend-spec.ts b/test/internals/legend-spec.ts index a073cc36d..36a2422ef 100644 --- a/test/internals/legend-spec.ts +++ b/test/internals/legend-spec.ts @@ -461,15 +461,20 @@ describe("LEGEND", () => { }); it("should render custom points in legend", () => { - const nodes = chart.internal.$el.svg.selectAll(`.${CLASS.legendItem} .${CLASS.legendItemPoint}`); + const {$el} = chart.internal; + const nodes = $el.svg.selectAll(`.${CLASS.legendItem} .${CLASS.legendItemPoint}`); + const pointTagName = ["circle", "rect", "use", "circle"]; - nodes.each((data, idx, selection) => { + nodes.each(function(data, idx, selection) { const node = selection[idx]; const nodeName = node.nodeName.toLowerCase(); - const expected = (idx === 0 || idx === 3) ? - "circle" : (idx === 1) ? "rect" : (idx === 2) ? "use" : ""; - expect(nodeName).to.be.equal(expected); + // check if referenced defs node exists + if (pointTagName[idx] === "use") { + expect($el.defs.select(this.getAttribute("href")).size()).to.be.equal(1); + } + + expect(nodeName).to.be.equal(pointTagName[idx]); }); expect(nodes.size()).to.be.equal(chart.data().length);