Skip to content

Commit c4efc35

Browse files
committed
sortedMark: true sorts the dots by descending radius. opt-in
1 parent 817a935 commit c4efc35

File tree

4 files changed

+64
-57
lines changed

4 files changed

+64
-57
lines changed

README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -642,7 +642,7 @@ If the **x** channel is not specified, dots will be horizontally centered in the
642642

643643
The **r** option defaults to three pixels and can be specified as either a channel or constant. When the radius is specified as a number, it is interpreted as a constant; otherwise it is interpreted as a channel. Dots with a nonpositive radius are not drawn. The **stroke** defaults to none. The **fill** defaults to currentColor if the stroke is none, and to none otherwise. The **strokeWidth** defaults to 1.5.
644644

645-
Dots are drawn in input order, with the last data drawn on top. If sorting is needed, say to mitigate overplotting by drawing the smallest dots on top, consider a [sort and reverse transform](#transforms).
645+
Dots are drawn in input order, with the last data drawn on top. If sorting is needed, consider a [sort and reverse transform](#transforms). The **sortedMark** option, if set to true, will sort the dots in descending radius order, a common approach to mitigate overplotting by drawing the smallest dots on top.
646646

647647
#### Plot.dot(*data*, *options*)
648648

src/marks/dot.js

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ const defaults = {
1111

1212
export class Dot extends Mark {
1313
constructor(data, options = {}) {
14-
const {x, y, r} = options;
14+
const {x, y, r, sortedMark = false} = options;
1515
const [vr, cr] = maybeNumber(r, 3);
1616
super(
1717
data,
@@ -24,6 +24,7 @@ export class Dot extends Mark {
2424
defaults
2525
);
2626
this.r = cr;
27+
this.sortedMark = !!sortedMark;
2728
}
2829
render(
2930
I,
@@ -33,7 +34,12 @@ export class Dot extends Mark {
3334
) {
3435
const {x: X, y: Y, r: R} = channels;
3536
let index = filter(I, X, Y);
36-
if (R) index = index.filter(i => positive(R[i]));
37+
if (R) {
38+
index = index.filter(i => positive(R[i]));
39+
if (this.sortedMark) {
40+
index = index.sort((i, j) => R[j] - R[i]);
41+
}
42+
}
3743
return create("svg:g")
3844
.call(applyIndirectStyles, this)
3945
.call(applyTransform, x, y, 0.5, 0.5)

0 commit comments

Comments
 (0)