diff --git a/README.md b/README.md index e246389..8cf062e 100644 --- a/README.md +++ b/README.md @@ -929,11 +929,11 @@ Symbols provide a categorical shape encoding as is commonly used in scatterplots Constructs a new symbol generator of the specified [type](#symbol_type) and [size](#symbol_size). If not specified, *type* defaults to a circle, and *size* defaults to 64. -# symbol(arguments…) · [Source](https://github.com/d3/d3-shape/blob/master/src/symbol.js), [Examples](https://observablehq.com/@d3/fitted-symbols) +# symbol(arguments…) · [Source](https://github.com/d3/d3-shape/blob/master/src/symbol.js) Generates a symbol for the given *arguments*. The *arguments* are arbitrary; they are simply propagated to the symbol generator’s accessor functions along with the `this` object. For example, with the default settings, no arguments are needed to produce a circle with area 64 square pixels. If the symbol generator has a [context](#symbol_context), then the symbol is rendered to this context as a sequence of [path method](http://www.w3.org/TR/2dcontext/#canvaspathmethods) calls and this function returns void. Otherwise, a [path data](http://www.w3.org/TR/SVG/paths.html#PathData) string is returned. -# symbol.type([type]) · [Source](https://github.com/d3/d3-shape/blob/master/src/symbol.js), [Examples](https://observablehq.com/@d3/fitted-symbols) +# symbol.type([type]) · [Source](https://github.com/d3/d3-shape/blob/master/src/symbol.js) If *type* is specified, sets the symbol type to the specified function or symbol type and returns this symbol generator. If *type* is a function, the symbol generator’s arguments and *this* are passed through. (See [*selection*.attr](https://github.com/d3/d3-selection/blob/master/README.md#selection_attr) if you are using d3-selection.) If *type* is not specified, returns the current symbol type accessor, which defaults to: @@ -943,9 +943,9 @@ function type() { } ``` -See [symbols](#symbols) for the set of built-in symbol types. To implement a custom symbol type, pass an object that implements [*symbolType*.draw](#symbolType_draw). +See [symbolsFill](#symbolsFill) and [symbolsStroke](#symbolsStroke) for built-in symbol types. To implement a custom symbol type, pass an object that implements [*symbolType*.draw](#symbolType_draw). -# symbol.size([size]) · [Source](https://github.com/d3/d3-shape/blob/master/src/symbol.js), [Examples](https://observablehq.com/@d3/fitted-symbols) +# symbol.size([size]) · [Source](https://github.com/d3/d3-shape/blob/master/src/symbol.js) If *size* is specified, sets the size to the specified function or number and returns this symbol generator. If *size* is a function, the symbol generator’s arguments and *this* are passed through. (See [*selection*.attr](https://github.com/d3/d3-selection/blob/master/README.md#selection_attr) if you are using d3-selection.) If *size* is not specified, returns the current size accessor, which defaults to: @@ -961,37 +961,65 @@ Specifying the size as a function is useful for constructing a scatterplot with If *context* is specified, sets the context and returns this symbol generator. If *context* is not specified, returns the current context, which defaults to null. If the context is not null, then the [generated symbol](#_symbol) is rendered to this context as a sequence of [path method](http://www.w3.org/TR/2dcontext/#canvaspathmethods) calls. Otherwise, a [path data](http://www.w3.org/TR/SVG/paths.html#PathData) string representing the generated symbol is returned. -# d3.symbols · [Source](https://github.com/d3/d3-shape/blob/master/src/symbol.js), [Examples](https://observablehq.com/@d3/fitted-symbols) +# d3.symbolsFill · [Source](https://github.com/d3/d3-shape/blob/master/src/symbol.js) -An array containing the set of all built-in symbol types: [circle](#symbolCircle), [cross](#symbolCross), [diamond](#symbolDiamond), [square](#symbolSquare), [star](#symbolStar), [triangle](#symbolTriangle), and [wye](#symbolWye). Useful for constructing the range of an [ordinal scale](https://github.com/d3/d3-scale#ordinal-scales) should you wish to use a shape encoding for categorical data. +An array containing a set of symbol types designed for filling: [circle](#symbolCircle), [cross](#symbolCross), [diamond](#symbolDiamond), [square](#symbolSquare), [star](#symbolStar), [triangle](#symbolTriangle), and [wye](#symbolWye). Useful for constructing the range of an [ordinal scale](https://github.com/d3/d3-scale#ordinal-scales) should you wish to use a shape encoding for categorical data. -# d3.symbolCircle · [Source](https://github.com/d3/d3-shape/blob/master/src/symbol/circle.js), [Examples](https://observablehq.com/@d3/fitted-symbols) +# d3.symbolsStroke · [Source](https://github.com/d3/d3-shape/blob/master/src/symbol.js) -The circle symbol type. +An array containing a set of symbol types designed for stroking: [circle](#symbolCircle), [plus](#symbolPlus), [x](#symbolX), [triangle2](#symbolTriangle2), [asterisk](#symbolAsterisk), [square2](#symbolSquare2), and [diamond2](#symbolDiamond2). Useful for constructing the range of an [ordinal scale](https://github.com/d3/d3-scale#ordinal-scales) should you wish to use a shape encoding for categorical data. -# d3.symbolCross · [Source](https://github.com/d3/d3-shape/blob/master/src/symbol/cross.js), [Examples](https://observablehq.com/@d3/fitted-symbols) +# d3.symbolAsterisk · [Source](https://github.com/d3/d3-shape/blob/master/src/symbol/asterisk.js) -The Greek cross symbol type, with arms of equal length. +The asterisk symbol type; intended for stroking. -# d3.symbolDiamond · [Source](https://github.com/d3/d3-shape/blob/master/src/symbol/diamond.js), [Examples](https://observablehq.com/@d3/fitted-symbols) +# d3.symbolCircle · [Source](https://github.com/d3/d3-shape/blob/master/src/symbol/circle.js) -The rhombus symbol type. +The circle symbol type; intended for either filling or stroking. -# d3.symbolSquare · [Source](https://github.com/d3/d3-shape/blob/master/src/symbol/square.js), [Examples](https://observablehq.com/@d3/fitted-symbols) +# d3.symbolCross · [Source](https://github.com/d3/d3-shape/blob/master/src/symbol/cross.js) -The square symbol type. +The Greek cross symbol type, with arms of equal length; intended for filling. -# d3.symbolStar · [Source](https://github.com/d3/d3-shape/blob/master/src/symbol/star.js), [Examples](https://observablehq.com/@d3/fitted-symbols) +# d3.symbolDiamond · [Source](https://github.com/d3/d3-shape/blob/master/src/symbol/diamond.js) -The pentagonal star (pentagram) symbol type. +The rhombus symbol type; intended for filling. -# d3.symbolTriangle · [Source](https://github.com/d3/d3-shape/blob/master/src/symbol/triangle.js), [Examples](https://observablehq.com/@d3/fitted-symbols) +# d3.symbolDiamond2 · [Source](https://github.com/d3/d3-shape/blob/master/src/symbol/diamond.js) -The up-pointing triangle symbol type. +The rotated square symbol type; intended for stroking. -# d3.symbolWye · [Source](https://github.com/d3/d3-shape/blob/master/src/symbol/wye.js), [Examples](https://observablehq.com/@d3/fitted-symbols) +# d3.symbolPlus · [Source](https://github.com/d3/d3-shape/blob/master/src/symbol/plus.js) -The Y-shape symbol type. +The plus symbol type; intended for stroking. + +# d3.symbolSquare · [Source](https://github.com/d3/d3-shape/blob/master/src/symbol/square.js) + +The square symbol type; intended for filling. + +# d3.symbolSquare2 · [Source](https://github.com/d3/d3-shape/blob/master/src/symbol/square2.js) + +The square2 symbol type; intended for stroking. + +# d3.symbolStar · [Source](https://github.com/d3/d3-shape/blob/master/src/symbol/star.js) + +The pentagonal star (pentagram) symbol type; intended for filling. + +# d3.symbolTriangle · [Source](https://github.com/d3/d3-shape/blob/master/src/symbol/triangle.js) + +The up-pointing triangle symbol type; intended for filling. + +# d3.symbolTriangle2 · [Source](https://github.com/d3/d3-shape/blob/master/src/symbol/triangle2.js) + +The up-pointing triangle symbol type; intended for stroking. + +# d3.symbolWye · [Source](https://github.com/d3/d3-shape/blob/master/src/symbol/wye.js) + +The Y-shape symbol type; intended for filling. + +# d3.symbolX · [Source](https://github.com/d3/d3-shape/blob/master/src/symbol/x.js) + +The X-shape symbol type; intended for stroking. # d3.pointRadial(angle, radius) · [Source](https://github.com/d3/d3-shape/blob/master/src/pointRadial.js), [Examples](https://observablehq.com/@d3/radial-area-chart) diff --git a/src/index.js b/src/index.js index 8ad85fc..9f02306 100644 --- a/src/index.js +++ b/src/index.js @@ -7,14 +7,20 @@ export {default as lineRadial, default as radialLine} from "./lineRadial.js"; // export {default as pointRadial} from "./pointRadial.js"; export {linkHorizontal, linkVertical, linkRadial} from "./link/index.js"; -export {default as symbol, symbols} from "./symbol.js"; +export {default as symbol, symbolsStroke, symbolsFill, symbolsFill as symbols} from "./symbol.js"; +export {default as symbolAsterisk} from "./symbol/asterisk.js"; export {default as symbolCircle} from "./symbol/circle.js"; export {default as symbolCross} from "./symbol/cross.js"; export {default as symbolDiamond} from "./symbol/diamond.js"; +export {default as symbolDiamond2} from "./symbol/diamond2.js"; +export {default as symbolPlus} from "./symbol/plus.js"; export {default as symbolSquare} from "./symbol/square.js"; +export {default as symbolSquare2} from "./symbol/square2.js"; export {default as symbolStar} from "./symbol/star.js"; export {default as symbolTriangle} from "./symbol/triangle.js"; +export {default as symbolTriangle2} from "./symbol/triangle2.js"; export {default as symbolWye} from "./symbol/wye.js"; +export {default as symbolX} from "./symbol/x.js"; export {default as curveBasisClosed} from "./curve/basisClosed.js"; export {default as curveBasisOpen} from "./curve/basisOpen.js"; diff --git a/src/math.js b/src/math.js index 131af62..272303d 100644 --- a/src/math.js +++ b/src/math.js @@ -1,15 +1,15 @@ -export var abs = Math.abs; -export var atan2 = Math.atan2; -export var cos = Math.cos; -export var max = Math.max; -export var min = Math.min; -export var sin = Math.sin; -export var sqrt = Math.sqrt; +export const abs = Math.abs; +export const atan2 = Math.atan2; +export const cos = Math.cos; +export const max = Math.max; +export const min = Math.min; +export const sin = Math.sin; +export const sqrt = Math.sqrt; -export var epsilon = 1e-12; -export var pi = Math.PI; -export var halfPi = pi / 2; -export var tau = 2 * pi; +export const epsilon = 1e-12; +export const pi = Math.PI; +export const halfPi = pi / 2; +export const tau = 2 * pi; export function acos(x) { return x > 1 ? 0 : x < -1 ? pi : Math.acos(x); diff --git a/src/symbol.js b/src/symbol.js index 749b492..2882cc0 100644 --- a/src/symbol.js +++ b/src/symbol.js @@ -1,14 +1,21 @@ import {path} from "d3-path"; +import constant from "./constant.js"; +import asterisk from "./symbol/asterisk.js"; import circle from "./symbol/circle.js"; import cross from "./symbol/cross.js"; import diamond from "./symbol/diamond.js"; -import star from "./symbol/star.js"; +import diamond2 from "./symbol/diamond2.js"; +import plus from "./symbol/plus.js"; import square from "./symbol/square.js"; +import square2 from "./symbol/square2.js"; +import star from "./symbol/star.js"; import triangle from "./symbol/triangle.js"; +import triangle2 from "./symbol/triangle2.js"; import wye from "./symbol/wye.js"; -import constant from "./constant.js"; +import x from "./symbol/x.js"; -export var symbols = [ +// These symbols are designed to be filled. +export const symbolsFill = [ circle, cross, diamond, @@ -18,13 +25,25 @@ export var symbols = [ wye ]; -export default function(type, size) { - var context = null; +// These symbols are designed to be stroked (with a width of 1.5px and round caps). +export const symbolsStroke = [ + circle, + plus, + x, + triangle2, + asterisk, + square2, + diamond2 +]; + +export default function Symbol(type, size) { + let context = null; + type = typeof type === "function" ? type : constant(type || circle); size = typeof size === "function" ? size : constant(size === undefined ? 64 : +size); function symbol() { - var buffer; + let buffer; if (!context) context = buffer = path(); type.apply(this, arguments).draw(context, +size.apply(this, arguments)); if (buffer) return context = null, buffer + "" || null; diff --git a/src/symbol/asterisk.js b/src/symbol/asterisk.js new file mode 100644 index 0000000..05eb9a2 --- /dev/null +++ b/src/symbol/asterisk.js @@ -0,0 +1,17 @@ +import {min, sqrt} from "../math.js"; + +const sqrt3 = sqrt(3); + +export default { + draw(context, size) { + const r = sqrt(size + min(size / 28, 0.75)) * 0.59436; + const t = r / 2; + const u = t * sqrt3; + context.moveTo(0, r); + context.lineTo(0, -r); + context.moveTo(-u, -t); + context.lineTo(u, t); + context.moveTo(-u, t); + context.lineTo(u, -t); + } +}; diff --git a/src/symbol/circle.js b/src/symbol/circle.js index 4653651..485e06c 100644 --- a/src/symbol/circle.js +++ b/src/symbol/circle.js @@ -1,8 +1,8 @@ -import {pi, tau} from "../math.js"; +import {pi, sqrt, tau} from "../math.js"; export default { - draw: function(context, size) { - var r = Math.sqrt(size / pi); + draw(context, size) { + const r = sqrt(size / pi); context.moveTo(r, 0); context.arc(0, 0, r, 0, tau); } diff --git a/src/symbol/cross.js b/src/symbol/cross.js index a282f80..5e586e9 100644 --- a/src/symbol/cross.js +++ b/src/symbol/cross.js @@ -1,6 +1,8 @@ +import {sqrt} from "../math.js"; + export default { - draw: function(context, size) { - var r = Math.sqrt(size / 5) / 2; + draw(context, size) { + const r = sqrt(size / 5) / 2; context.moveTo(-3 * r, -r); context.lineTo(-r, -r); context.lineTo(-r, -3 * r); diff --git a/src/symbol/diamond.js b/src/symbol/diamond.js index 9f4ff1a..7f4d60a 100644 --- a/src/symbol/diamond.js +++ b/src/symbol/diamond.js @@ -1,10 +1,12 @@ -var tan30 = Math.sqrt(1 / 3), - tan30_2 = tan30 * 2; +import {sqrt} from "../math.js"; + +const tan30 = sqrt(1 / 3); +const tan30_2 = tan30 * 2; export default { - draw: function(context, size) { - var y = Math.sqrt(size / tan30_2), - x = y * tan30; + draw(context, size) { + const y = sqrt(size / tan30_2); + const x = y * tan30; context.moveTo(0, -y); context.lineTo(x, 0); context.lineTo(0, y); diff --git a/src/symbol/diamond2.js b/src/symbol/diamond2.js new file mode 100644 index 0000000..f4df0b3 --- /dev/null +++ b/src/symbol/diamond2.js @@ -0,0 +1,12 @@ +import {sqrt} from "../math.js"; + +export default { + draw(context, size) { + const r = sqrt(size) * 0.62625; + context.moveTo(0, -r); + context.lineTo(r, 0); + context.lineTo(0, r); + context.lineTo(-r, 0); + context.closePath(); + } +}; diff --git a/src/symbol/plus.js b/src/symbol/plus.js new file mode 100644 index 0000000..bbb7741 --- /dev/null +++ b/src/symbol/plus.js @@ -0,0 +1,11 @@ +import {min, sqrt} from "../math.js"; + +export default { + draw(context, size) { + const r = sqrt(size - min(size / 7, 2)) * 0.87559; + context.moveTo(-r, 0); + context.lineTo(r, 0); + context.moveTo(0, r); + context.lineTo(0, -r); + } +}; diff --git a/src/symbol/square.js b/src/symbol/square.js index 10beccd..6a8d5dd 100644 --- a/src/symbol/square.js +++ b/src/symbol/square.js @@ -1,7 +1,9 @@ +import {sqrt} from "../math.js"; + export default { - draw: function(context, size) { - var w = Math.sqrt(size), - x = -w / 2; + draw(context, size) { + const w = sqrt(size); + const x = -w / 2; context.rect(x, x, w, w); } }; diff --git a/src/symbol/square2.js b/src/symbol/square2.js new file mode 100644 index 0000000..508d504 --- /dev/null +++ b/src/symbol/square2.js @@ -0,0 +1,12 @@ +import {sqrt} from "../math.js"; + +export default { + draw(context, size) { + const r = sqrt(size) * 0.4431; + context.moveTo(r, r); + context.lineTo(r, -r); + context.lineTo(-r, -r); + context.lineTo(-r, r); + context.closePath(); + } +}; diff --git a/src/symbol/star.js b/src/symbol/star.js index c3560c3..e5000d9 100644 --- a/src/symbol/star.js +++ b/src/symbol/star.js @@ -1,21 +1,21 @@ -import {pi, tau} from "../math.js"; +import {sin, cos, sqrt, pi, tau} from "../math.js"; -var ka = 0.89081309152928522810, - kr = Math.sin(pi / 10) / Math.sin(7 * pi / 10), - kx = Math.sin(tau / 10) * kr, - ky = -Math.cos(tau / 10) * kr; +const ka = 0.89081309152928522810; +const kr = sin(pi / 10) / sin(7 * pi / 10); +const kx = sin(tau / 10) * kr; +const ky = -cos(tau / 10) * kr; export default { - draw: function(context, size) { - var r = Math.sqrt(size * ka), - x = kx * r, - y = ky * r; + draw(context, size) { + const r = sqrt(size * ka); + const x = kx * r; + const y = ky * r; context.moveTo(0, -r); context.lineTo(x, y); - for (var i = 1; i < 5; ++i) { - var a = tau * i / 5, - c = Math.cos(a), - s = Math.sin(a); + for (let i = 1; i < 5; ++i) { + const a = tau * i / 5; + const c = cos(a); + const s = sin(a); context.lineTo(s * r, -c * r); context.lineTo(c * x - s * y, s * x + c * y); } diff --git a/src/symbol/triangle.js b/src/symbol/triangle.js index a323d20..023e824 100644 --- a/src/symbol/triangle.js +++ b/src/symbol/triangle.js @@ -1,8 +1,10 @@ -var sqrt3 = Math.sqrt(3); +import {sqrt} from "../math.js"; + +const sqrt3 = sqrt(3); export default { - draw: function(context, size) { - var y = -Math.sqrt(size / (sqrt3 * 3)); + draw(context, size) { + const y = -sqrt(size / (sqrt3 * 3)); context.moveTo(0, y * 2); context.lineTo(-sqrt3 * y, -y); context.lineTo(sqrt3 * y, -y); diff --git a/src/symbol/triangle2.js b/src/symbol/triangle2.js new file mode 100644 index 0000000..6b189e4 --- /dev/null +++ b/src/symbol/triangle2.js @@ -0,0 +1,15 @@ +import {sqrt} from "../math.js"; + +const sqrt3 = sqrt(3); + +export default { + draw(context, size) { + const s = sqrt(size) * 0.6824; + const t = s / 2; + const u = (s * sqrt3) / 2; // cos(Math.PI / 6) + context.moveTo(0, -s); + context.lineTo(u, t); + context.lineTo(-u, t); + context.closePath(); + } +}; diff --git a/src/symbol/wye.js b/src/symbol/wye.js index 697f2c3..b8fad35 100644 --- a/src/symbol/wye.js +++ b/src/symbol/wye.js @@ -1,17 +1,16 @@ -var c = -0.5, - s = Math.sqrt(3) / 2, - k = 1 / Math.sqrt(12), - a = (k / 2 + 1) * 3; +import {sqrt} from "../math.js"; + +const c = -0.5; +const s = sqrt(3) / 2; +const k = 1 / sqrt(12); +const a = (k / 2 + 1) * 3; export default { - draw: function(context, size) { - var r = Math.sqrt(size / a), - x0 = r / 2, - y0 = r * k, - x1 = x0, - y1 = r * k + r, - x2 = -x1, - y2 = y1; + draw(context, size) { + const r = sqrt(size / a); + const x0 = r / 2, y0 = r * k; + const x1 = x0, y1 = r * k + r; + const x2 = -x1, y2 = y1; context.moveTo(x0, y0); context.lineTo(x1, y1); context.lineTo(x2, y2); diff --git a/src/symbol/x.js b/src/symbol/x.js new file mode 100644 index 0000000..1d8c829 --- /dev/null +++ b/src/symbol/x.js @@ -0,0 +1,11 @@ +import {min, sqrt} from "../math.js"; + +export default { + draw(context, size) { + const r = sqrt(size - min(size / 6, 1.7)) * 0.6189; + context.moveTo(-r, -r); + context.lineTo(r, r); + context.moveTo(-r, r); + context.lineTo(r, -r); + } +}; diff --git a/test/symbol-test.js b/test/symbol-test.js index ba5deea..9c908c7 100644 --- a/test/symbol-test.js +++ b/test/symbol-test.js @@ -1,5 +1,5 @@ import assert from "assert"; -import {symbol, symbolCircle, symbolCross, symbolDiamond, symbolSquare, symbolStar, symbolTriangle, symbolWye} from "../src/index.js"; +import {symbol, symbolAsterisk, symbolCircle, symbolCross, symbolDiamond, symbolDiamond2, symbolPlus, symbolSquare, symbolSquare2, symbolStar, symbolTriangle, symbolTriangle2, symbolWye, symbolX} from "../src/index.js"; import {assertInDelta, assertPathEqual} from "./asserts.js"; import {polygonContext} from "./polygonContext.js"; @@ -44,6 +44,12 @@ it("symbol.size(size) observes the specified size constant", () => { assertPathEqual(s.size(4 * Math.PI)(), "M2,0A2,2,0,1,1,-2,0A2,2,0,1,1,2,0"); }); +it("symbol.type(symbolAsterisk) generates the expected path", () => { + const s = symbol().type(symbolAsterisk).size(function(d) { return d; }); + assertPathEqual(s(0), "M0,0L0,0M0,0L0,0M0,0L0,0"); + assertPathEqual(s(20), "M0,2.705108L0,-2.705108M-2.342692,-1.352554L2.342692,1.352554M-2.342692,1.352554L2.342692,-1.352554"); +}); + it("symbol.type(symbolCircle) generates the expected path", () => { const s = symbol().type(symbolCircle).size(function(d) { return d; }); assertPathEqual(s(0), "M0,0"); @@ -74,6 +80,18 @@ it("symbol.type(symbolDiamond) generates the expected path", () => { assertPathEqual(s(10), "M0,-2.942831L1.699044,0L0,2.942831L-1.699044,0Z"); }); +it("symbol.type(symbolDiamond2) generates the expected path", () => { + const s = symbol().type(symbolDiamond2).size(function(d) { return d; }); + assertPathEqual(s(0), "M0,0L0,0L0,0L0,0Z"); + assertPathEqual(s(20), "M0,-2.800675L2.800675,0L0,2.800675L-2.800675,0Z"); +}); + +it("symbol.type(symbolPlus) generates the expected path", () => { + const s = symbol().type(symbolPlus).size(function(d) { return d; }); + assertPathEqual(s(0), "M0,0L0,0M0,0L0,0"); + assertPathEqual(s(20), "M-3.714814,0L3.714814,0M0,3.714814L0,-3.714814"); +}); + it("symbol.type(symbolStar) generates a polygon with the specified size", () => { const p = polygonContext(), s = symbol().type(symbolStar).context(p); s.size(1)(); assertInDelta(p.area(), 1); @@ -99,6 +117,12 @@ it("symbol.type(symbolSquare) generates the expected path", () => { assertPathEqual(s(16), "M-2,-2h4v4h-4Z"); }); +it("symbol.type(symbolSquare2) generates the expected path", () => { + const s = symbol().type(symbolSquare2).size(function(d) { return d; }); + assertPathEqual(s(0), "M0,0L0,0L0,0L0,0Z"); + assertPathEqual(s(20), "M1.981603,1.981603L1.981603,-1.981603L-1.981603,-1.981603L-1.981603,1.981603Z"); +}); + it("symbol.type(symbolTriangle) generates a polygon with the specified size", () => { const p = polygonContext(), s = symbol().type(symbolTriangle).context(p); s.size(1)(); assertInDelta(p.area(), 1); @@ -111,6 +135,12 @@ it("symbol.type(symbolTriangle) generates the expected path", () => { assertPathEqual(s(10), "M0,-2.774528L2.402811,1.387264L-2.402811,1.387264Z"); }); +it("symbol.type(symbolTriangle2) generates the expected path", () => { + const s = symbol().type(symbolTriangle2).size(function(d) { return d; }); + assertPathEqual(s(0), "M0,0L0,0L0,0Z"); + assertPathEqual(s(20), "M0,-3.051786L2.642924,1.525893L-2.642924,1.525893Z"); +}); + it("symbol.type(symbolWye) generates a polygon with the specified size", () => { const p = polygonContext(), s = symbol().type(symbolWye).context(p); s.size(1)(); assertInDelta(p.area(), 1); @@ -123,6 +153,12 @@ it("symbol.type(symbolWye) generates the expected path", () => { assertPathEqual(s(10), "M0.853360,0.492688L0.853360,2.199408L-0.853360,2.199408L-0.853360,0.492688L-2.331423,-0.360672L-1.478063,-1.838735L0,-0.985375L1.478063,-1.838735L2.331423,-0.360672Z"); }); +it("symbol.type(symbolX) generates the expected path", () => { + const s = symbol().type(symbolX).size(function(d) { return d; }); + assertPathEqual(s(0), "M0,0L0,0M0,0L0,0"); + assertPathEqual(s(20), "M-2.647561,-2.647561L2.647561,2.647561M-2.647561,2.647561L2.647561,-2.647561"); +}); + it("symbol(type, size) is equivalent to symbol().type(type).size(size)", () => { const s0 = symbol().type(symbolCross).size(16); const s1 = symbol(symbolCross, 16); diff --git a/test/symbols-test.js b/test/symbols-test.js index 3c66cf7..500cc2d 100644 --- a/test/symbols-test.js +++ b/test/symbols-test.js @@ -1,8 +1,12 @@ import assert from "assert"; -import {symbols, symbolCircle, symbolCross, symbolDiamond, symbolSquare, symbolStar, symbolTriangle, symbolWye} from "../src/index.js"; +import {symbols, symbolsFill, symbolsStroke, symbolCircle, symbolCross, symbolDiamond, symbolSquare, symbolStar, symbolTriangle, symbolWye, symbolPlus, symbolX, symbolTriangle2, symbolAsterisk, symbolSquare2, symbolDiamond2} from "../src/index.js"; -it("symbols is the array of symbol types", () => { - assert.deepStrictEqual(symbols, [ +it("symbols is a deprecated alias for symbolsFill", () => { + assert.strictEqual(symbols, symbolsFill); +}); + +it("symbolsFill is the array of symbol types", () => { + assert.deepStrictEqual(symbolsFill, [ symbolCircle, symbolCross, symbolDiamond, @@ -12,3 +16,15 @@ it("symbols is the array of symbol types", () => { symbolWye ]); }); + +it("symbolsStroke is the array of symbol types", () => { + assert.deepStrictEqual(symbolsStroke, [ + symbolCircle, + symbolPlus, + symbolX, + symbolTriangle2, + symbolAsterisk, + symbolSquare2, + symbolDiamond2 + ]); +});