diff --git a/demo/demo.js b/demo/demo.js index b2134cee8..54bc67dcc 100644 --- a/demo/demo.js +++ b/demo/demo.js @@ -2413,6 +2413,24 @@ d3.select(".chart_area") show: false } } + }, + LinePoint: { + options: { + data: { + columns: [ + ["data1", 30, 200, 100, 400, 150, 250], + ["data2", 50, 20, 10, 40, 15, 25], + ["data3", 170, 250, 210, 190, 175, 225], + ["data4", 283, 170, 275, 143, 220, 255] + ], + types: { + data2: "scatter" + } + }, + line: { + point: ["data1", "data3"] + } + } } }, PieChartOptions: { diff --git a/spec/internals/data-spec.js b/spec/internals/data-spec.js index 1a536c94c..9654bb6f5 100644 --- a/spec/internals/data-spec.js +++ b/spec/internals/data-spec.js @@ -1287,6 +1287,72 @@ describe("DATA", () => { expect(texts.size()).to.be.equal(data.length); }); }); + + describe("on scatter + line type", () => { + before(() => { + args = { + data: { + columns: [ + ["data1", 30, 200, 100, 500], + ["data2", 10, 100, 200, 400] + ], + types: { + data1: "scatter", + data2: "line" + } + }, + line: { + point: false + } + } + }); + + it("should draw points for the scatterplot", () => { + const id = "data1"; + const data = chart.data.values(id); + const points = chart.internal.main.selectAll(`.${CLASS.shapes}-${id} circle`); + + expect(points.size()).to.be.equal(data.length); + }); + + it("should not draw points for the linechart", () => { + const id = "data2"; + const points = chart.internal.main.selectAll(`.${CLASS.shapes}-${id} circle`); + + expect(points.size()).to.be.equal(0); + }); + }); + + describe("on line with array points option", () => { + before(() => { + args = { + data: { + columns: [ + ["data1", 30, 200, 100, 500], + ["data2", 10, 100, 200, 400] + ] + }, + line: { + point: ["data1"] + } + } + }); + + it("should draw points for the first line", () => { + const id = "data1"; + const data = chart.data.values(id); + const points = chart.internal.main.selectAll(`.${CLASS.shapes}-${id} circle`); + + expect(points.size()).to.be.equal(data.length); + }); + + it("should not draw points for the second line", () => { + const id = "data2"; + const points = chart.internal.main.selectAll(`.${CLASS.shapes}-${id} circle`); + + expect(points.size()).to.be.equal(0); + }); + }); }); describe("inner functions", () => { diff --git a/src/config/Options.js b/src/config/Options.js index 0fb86bd0c..7b58fb48a 100644 --- a/src/config/Options.js +++ b/src/config/Options.js @@ -2365,6 +2365,7 @@ export default class Options { * - step * - step-before * - step-after + * @property {Boolean|Array} [line.point=true] Set to false to not draw points on linecharts. Or pass an array of line ids to draw points for. * @example * line: { * connectNull: true, @@ -2374,12 +2375,21 @@ export default class Options { * ], * step: { * type: "step-after" - * } + * }, + * + * // hide all data points ('point.show=false' also has similar effect) + * point: false, + * + * // show data points for only indicated datas + * point: [ + * "data1", "data3" + * ] * } */ line_connectNull: false, line_step_type: "step", line_classes: undefined, + line_point: true, /** * Set bar options diff --git a/src/shape/line.js b/src/shape/line.js index eecddb7b3..edc401230 100644 --- a/src/shape/line.js +++ b/src/shape/line.js @@ -12,7 +12,7 @@ import { } from "d3-selection"; import CLASS from "../config/classes"; import ChartInternal from "../internals/ChartInternal"; -import {extend, isDefined, isFunction, isUndefined, isValue} from "../internals/util"; +import {extend, isArray, isDefined, isFunction, isUndefined, isValue} from "../internals/util"; extend(ChartInternal.prototype, { initLine() { @@ -492,7 +492,8 @@ extend(ChartInternal.prototype, { } $$.mainCircle = $$.main.selectAll(`.${CLASS.circles}`).selectAll(`.${CLASS.circle}`) - .data(d => !$$.isBarType(d) && $$.labelishData(d)); + .data(d => !$$.isBarType(d) && (!$$.isLineType(d) || $$.shouldDrawPointsForLine(d)) && + $$.labelishData(d)); $$.mainCircle.exit().remove(); @@ -662,5 +663,12 @@ extend(ChartInternal.prototype, { isWithinStep(that, y) { return Math.abs(y - d3Mouse(that)[1]) < 30; - } + }, + + shouldDrawPointsForLine(d) { + const linePoint = this.config.line_point; + + return linePoint === true || + (isArray(linePoint) && linePoint.indexOf(d.id) !== -1); + }, });