style · Salebarn/plot@18fe11c · GitHub
Skip to content

Commit 18fe11c

Browse files
mbostockmbostock
committed
style
1 parent ac93f58 commit 18fe11c

12 files changed

Lines changed: 160 additions & 221 deletions

File tree

‎src/mark.js‎

Lines changed: 2 additions & 2 deletions

‎src/marks/area.js‎

Lines changed: 13 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import {create} from "d3-selection";
22
import {area as shapeArea} from "d3-shape";
33
import {Curve} from "../curve.js";
4-
import {identity, indexOf, zero, string, number} from "../mark.js";
4+
import {Mark, identity, indexOf, zero} from "../mark.js";
55
import {defined} from "../defined.js";
6-
import {Mark} from "../mark.js";
6+
import {Style, applyStyles} from "../style.js";
77

88
export class Area extends Mark {
99
constructor(
@@ -12,12 +12,9 @@ export class Area extends Mark {
1212
x1,
1313
y1,
1414
x2,
15-
y2
16-
} = {},
17-
{
15+
y2,
1816
curve,
19-
fill = "currentColor",
20-
fillOpacity
17+
style
2118
} = {}
2219
) {
2320
super(
@@ -30,14 +27,12 @@ export class Area extends Mark {
3027
]
3128
);
3229
this.curve = Curve(curve);
33-
this.fill = string(fill);
34-
this.fillOpacity = number(fillOpacity);
30+
this.style = Style(style);
3531
}
3632
render(I, {x, y}, {x1: X1, y1: Y1, x2: X2 = X1, y2: Y2 = Y1}) {
37-
const {curve, fill, fillOpacity} = this;
33+
const {curve, style} = this;
3834
return create("svg:path")
39-
.attr("fill", fill)
40-
.attr("fill-opacity", fillOpacity)
35+
.call(applyStyles, style)
4136
.attr("d", shapeArea()
4237
.curve(curve)
4338
.defined(i => defined(X1[i]) && defined(Y1[i]) && defined(X2[i]) && defined(Y2[i]))
@@ -50,28 +45,28 @@ export class Area extends Mark {
5045
}
5146
}
5247

53-
export function area(data, channels, style) {
54-
return new Area(data, channels, style);
48+
export function area(data, options) {
49+
return new Area(data, options);
5550
}
5651

57-
export function areaX(data, {x, x1, x2, y = indexOf} = {}, style) {
52+
export function areaX(data, {x, x1, x2, y = indexOf, ...options} = {}) {
5853
if (x1 === undefined && x2 === undefined) { // {x} or {}
5954
x1 = zero, x2 = x === undefined ? identity : x;
6055
} else if (x1 === undefined) { // {x, x2} or {x2}
6156
x1 = x === undefined ? zero : x;
6257
} else if (x2 === undefined) { // {x, x1} or {x1}
6358
x2 = x === undefined ? zero : x;
6459
}
65-
return new Area(data, {x1, x2, y1: y}, style);
60+
return new Area(data, {...options, x1, x2, y1: y, y2: undefined});
6661
}
6762

68-
export function areaY(data, {x = indexOf, y, y1, y2} = {}, style) {
63+
export function areaY(data, {x = indexOf, y, y1, y2, ...options} = {}) {
6964
if (y1 === undefined && y2 === undefined) { // {y} or {}
7065
y1 = zero, y2 = y === undefined ? identity : y;
7166
} else if (y1 === undefined) { // {y, y2} or {y2}
7267
y1 = y === undefined ? zero : y;
7368
} else if (y2 === undefined) { // {y, y1} or {y1}
7469
y2 = y === undefined ? zero : y;
7570
}
76-
return new Area(data, {x1: x, y1, y2}, style);
71+
return new Area(data, {...options, x1: x, x2: undefined, y1, y2});
7772
}

‎src/marks/bar.js‎

Lines changed: 15 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,37 @@
11
import {create} from "d3-selection";
22
import {identity, indexOf} from "../mark.js";
33
import {defined} from "../defined.js";
4-
import {Mark, string, number} from "../mark.js";
4+
import {Mark, number} from "../mark.js";
5+
import {Style, applyIndirectStyles, applyDirectStyles} from "../style.js";
56

67
class Bar extends Mark {
78
constructor(
89
data,
910
channels,
1011
{
11-
fill = "currentColor",
12-
fillOpacity,
13-
stroke,
14-
strokeWidth,
15-
strokeOpacity,
16-
mixBlendMode,
12+
style,
1713
insetTop = 0,
1814
insetRight = 0,
1915
insetBottom = 0,
2016
insetLeft = 0
2117
} = {}
2218
) {
2319
super(data, channels);
24-
this.fill = string(fill);
25-
this.fillOpacity = number(fillOpacity);
26-
this.stroke = string(stroke);
27-
this.strokeWidth = number(strokeWidth);
28-
this.strokeOpacity = number(strokeOpacity);
29-
this.mixBlendMode = string(mixBlendMode);
20+
this.style = Style(style);
3021
this.insetTop = number(insetTop);
3122
this.insetRight = number(insetRight);
3223
this.insetBottom = number(insetBottom);
3324
this.insetLeft = number(insetLeft);
3425
}
3526
render(I, scales, channels) {
3627
const {x: X, y: Y} = channels;
37-
const {
38-
fill,
39-
fillOpacity,
40-
stroke,
41-
strokeWidth,
42-
strokeOpacity,
43-
mixBlendMode
44-
} = this;
28+
const {style} = this;
4529
return create("svg:g")
46-
.attr("fill", fill)
47-
.attr("fill-opacity", fillOpacity)
48-
.attr("stroke", stroke)
49-
.attr("stroke-width", strokeWidth)
50-
.attr("stroke-opacity", strokeOpacity)
30+
.call(applyIndirectStyles, style)
5131
.call(g => g.selectAll()
5232
.data(I.filter(i => defined(X[i]) && defined(Y[i])))
5333
.join("rect")
54-
.style("mix-blend-mode", mixBlendMode)
34+
.call(applyDirectStyles, style)
5535
.attr("x", this._x(scales, channels))
5636
.attr("width", this._width(scales, channels))
5737
.attr("y", this._y(scales, channels))
@@ -61,15 +41,15 @@ class Bar extends Mark {
6141
}
6242

6343
export class BarX extends Bar {
64-
constructor(data, {x = identity, y = indexOf} = {}, style) {
44+
constructor(data, {x = identity, y = indexOf, ...options} = {}) {
6545
super(
6646
data,
6747
[
6848
{name: "x", value: x, scale: "x"},
6949
{name: "y", value: y, scale: "y", type: "band"},
7050
{value: [0], scale: "x"} // ensure the x-domain includes zero
7151
],
72-
style
52+
options
7353
);
7454
}
7555
_x({x}, {x: X}) {
@@ -91,15 +71,15 @@ export class BarX extends Bar {
9171
}
9272

9373
export class BarY extends Bar {
94-
constructor(data, {x = indexOf, y = identity} = {}, style) {
74+
constructor(data, {x = indexOf, y = identity, ...options} = {}) {
9575
super(
9676
data,
9777
[
9878
{name: "x", value: x, scale: "x", type: "band"},
9979
{name: "y", value: y, scale: "y"},
10080
{value: [0], scale: "y"} // ensure the y-domain includes zero
10181
],
102-
style
82+
options
10383
);
10484
}
10585
_x({x}, {x: X}) {
@@ -120,10 +100,10 @@ export class BarY extends Bar {
120100
}
121101
}
122102

123-
export function barX(data, channels, style) {
124-
return new BarX(data, channels, style);
103+
export function barX(data, options) {
104+
return new BarX(data, options);
125105
}
126106

127-
export function barY(data, channels, style) {
128-
return new BarY(data, channels, style);
107+
export function barY(data, options) {
108+
return new BarY(data, options);
129109
}

‎src/marks/bin.js‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@ import {field, identity, zero} from "../mark.js";
33
import {Rect} from "./rect.js";
44

55
export class Bin extends Rect {
6-
constructor(data, value, channels, {domain, thresholds, ...style} = {}) {
7-
super(data, channels, style);
6+
constructor(data, {value, domain, thresholds, ...options} = {}) {
7+
super(data, options);
88
if (typeof value !== "function") value = field(value + "");
99
const bin = this.bin = binner().value(value);
1010
if (domain !== undefined) bin.domain(domain);
@@ -22,31 +22,33 @@ export class Bin extends Rect {
2222
}
2323
}
2424

25-
export function binX(data, {x = identity} = {}, style) {
25+
export function binX(data, {x = identity, ...options} = {}) {
2626
return new Bin(
2727
data,
28-
x,
2928
{
29+
insetTop: 1,
30+
...options,
31+
value: x,
3032
x1: zero,
3133
y1: typeof x === "string" ? startof(x) : start,
3234
x2: length,
3335
y2: end
34-
},
35-
{insetTop: 1, ...style}
36+
}
3637
);
3738
}
3839

39-
export function binY(data, {y = identity} = {}, style) {
40+
export function binY(data, {y = identity, ...options} = {}) {
4041
return new Bin(
4142
data,
42-
y,
4343
{
44+
insetLeft: 1,
45+
...options,
46+
value: y,
4447
x1: typeof y === "string" ? startof(y) : start,
4548
y1: zero,
4649
x2: end,
4750
y2: length
48-
},
49-
{insetLeft: 1, ...style}
51+
}
5052
);
5153
}
5254

‎src/marks/dot.js‎

Lines changed: 18 additions & 38 deletions

0 commit comments

Comments
 (0)