Skip to content

Commit 111cdf7

Browse files
Filmbostock
Fil
and
mbostock
authored
fix symbol set hint when fill is a constant currentColor (#1830)
* when we specify fill: "currentColor", this.fill is undefined, but we still want to pass "currentColor" as a hint to the symbol scale closes #1462 * materialize default stroke, too --------- Co-authored-by: Mike Bostock <[email protected]>
1 parent 1ff36a3 commit 111cdf7

File tree

8 files changed

+364
-2
lines changed

8 files changed

+364
-2
lines changed

‎src/marks/dot.js

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -57,8 +57,16 @@ export class Dot extends Mark {
5757
if (symbolChannel) {
5858
const {fill: fillChannel, stroke: strokeChannel} = channels;
5959
symbolChannel.hint = {
60-
fill: fillChannel ? (fillChannel.value === symbolChannel.value ? "color" : "currentColor") : this.fill,
61-
stroke: strokeChannel ? (strokeChannel.value === symbolChannel.value ? "color" : "currentColor") : this.stroke
60+
fill: fillChannel
61+
? fillChannel.value === symbolChannel.value
62+
? "color"
63+
: "currentColor"
64+
: this.fill ?? "currentColor",
65+
stroke: strokeChannel
66+
? strokeChannel.value === symbolChannel.value
67+
? "color"
68+
: "currentColor"
69+
: this.stroke ?? "none"
6270
};
6371
}
6472
}

‎test/marks/dot-test.js

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -111,3 +111,71 @@ it("dot(data, {stroke}) defaults strokeWidth to 1.5 if stroke is defined", () =>
111111
assert.strictEqual(Plot.dot(undefined, {stroke: "x"}).strokeWidth, 1.5);
112112
assert.strictEqual(Plot.dot(undefined, {stroke: null}).strokeWidth, undefined);
113113
});
114+
115+
it("dot(data, {fill, symbol}) initializes the symbol hint for a constant fill", () => {
116+
assert.deepStrictEqual(
117+
Plot.dot([], {
118+
fill: "currentColor",
119+
symbol: Plot.indexOf
120+
}).initialize().channels.symbol.hint,
121+
{fill: "currentColor", stroke: "none"}
122+
);
123+
assert.deepStrictEqual(
124+
Plot.dot([], {
125+
fill: "red",
126+
symbol: Plot.indexOf
127+
}).initialize().channels.symbol.hint,
128+
{fill: "red", stroke: "none"}
129+
);
130+
});
131+
132+
it("dot(data, {fill, symbol}) initializes the symbol hint for a channel fill", () => {
133+
assert.deepStrictEqual(
134+
Plot.dot([], {
135+
fill: Plot.indexOf,
136+
symbol: Plot.indexOf
137+
}).initialize().channels.symbol.hint,
138+
{fill: "color", stroke: "none"}
139+
);
140+
assert.deepStrictEqual(
141+
Plot.dot([], {
142+
fill: Plot.identity,
143+
symbol: Plot.indexOf
144+
}).initialize().channels.symbol.hint,
145+
{fill: "currentColor", stroke: "none"}
146+
);
147+
});
148+
149+
it("dot(data, {stroke, symbol}) initializes the symbol hint for a constant stroke", () => {
150+
assert.deepStrictEqual(
151+
Plot.dot([], {
152+
stroke: "currentColor",
153+
symbol: Plot.indexOf
154+
}).initialize().channels.symbol.hint,
155+
{fill: "none", stroke: "currentColor"}
156+
);
157+
assert.deepStrictEqual(
158+
Plot.dot([], {
159+
stroke: "red",
160+
symbol: Plot.indexOf
161+
}).initialize().channels.symbol.hint,
162+
{fill: "none", stroke: "red"}
163+
);
164+
});
165+
166+
it("dot(data, {stroke, symbol}) initializes the symbol hint for a channel stroke", () => {
167+
assert.deepStrictEqual(
168+
Plot.dot([], {
169+
stroke: Plot.indexOf,
170+
symbol: Plot.indexOf
171+
}).initialize().channels.symbol.hint,
172+
{fill: "none", stroke: "color"}
173+
);
174+
assert.deepStrictEqual(
175+
Plot.dot([], {
176+
stroke: Plot.identity,
177+
symbol: Plot.indexOf
178+
}).initialize().channels.symbol.hint,
179+
{fill: "none", stroke: "currentColor"}
180+
);
181+
});

‎test/output/symbolSetFill.svg

Lines changed: 43 additions & 0 deletions
Loading

‎test/output/symbolSetFillColor.html

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
<figure class="plot-d6a7b5-figure" style="max-width: initial;">
2+
<div class="plot-swatches plot-swatches-wrap">
3+
<style>
4+
.plot-swatches {
5+
font-family: system-ui, sans-serif;
6+
font-size: 10px;
7+
margin-bottom: 0.5em;
8+
}
9+
10+
.plot-swatch>svg {
11+
margin-right: 0.5em;
12+
overflow: visible;
13+
}
14+
15+
.plot-swatches-wrap {
16+
display: flex;
17+
align-items: center;
18+
min-height: 33px;
19+
flex-wrap: wrap;
20+
}
21+
22+
.plot-swatches-wrap .plot-swatch {
23+
display: inline-flex;
24+
align-items: center;
25+
margin-right: 1em;
26+
}
27+
</style><span class="plot-swatch"><svg viewBox="-8 -8 16 16" width="15" height="15" fill="rgb(35, 23, 27)" fill-opacity="1" stroke="none" stroke-opacity="1" stroke-width="1.5" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
28+
<path d="M4.5,0A4.5,4.5,0,1,1,-4.5,0A4.5,4.5,0,1,1,4.5,0"></path>
29+
</svg>0</span><span class="plot-swatch"><svg viewBox="-8 -8 16 16" width="15" height="15" fill="rgb(57, 135, 249)" fill-opacity="1" stroke="none" stroke-opacity="1" stroke-width="1.5" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
30+
<path d="M-5.35,-1.783L-1.783,-1.783L-1.783,-5.35L1.783,-5.35L1.783,-1.783L5.35,-1.783L5.35,1.783L1.783,1.783L1.783,5.35L-1.783,5.35L-1.783,1.783L-5.35,1.783Z"></path>
31+
</svg>1</span><span class="plot-swatch"><svg viewBox="-8 -8 16 16" width="15" height="15" fill="rgb(46, 229, 174)" fill-opacity="1" stroke="none" stroke-opacity="1" stroke-width="1.5" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
32+
<path d="M0,-7.423L4.285,0L0,7.423L-4.285,0Z"></path>
33+
</svg>2</span><span class="plot-swatch"><svg viewBox="-8 -8 16 16" width="15" height="15" fill="rgb(149, 251, 81)" fill-opacity="1" stroke="none" stroke-opacity="1" stroke-width="1.5" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
34+
<path d="M-3.988,-3.988h7.976v7.976h-7.976Z"></path>
35+
</svg>3</span><span class="plot-swatch"><svg viewBox="-8 -8 16 16" width="15" height="15" fill="rgb(254, 185, 39)" fill-opacity="1" stroke="none" stroke-opacity="1" stroke-width="1.5" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
36+
<path d="M0,-7.528L1.69,-2.326L7.16,-2.326L2.735,0.889L4.425,6.09L0,2.875L-4.425,6.09L-2.735,0.889L-7.16,-2.326L-1.69,-2.326Z"></path>
37+
</svg>4</span><span class="plot-swatch"><svg viewBox="-8 -8 16 16" width="15" height="15" fill="rgb(229, 72, 19)" fill-opacity="1" stroke="none" stroke-opacity="1" stroke-width="1.5" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
38+
<path d="M0,-6.998L6.06,3.499L-6.06,3.499Z"></path>
39+
</svg>5</span><span class="plot-swatch"><svg viewBox="-8 -8 16 16" width="15" height="15" fill="rgb(144, 12, 0)" fill-opacity="1" stroke="none" stroke-opacity="1" stroke-width="1.5" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
40+
<path d="M2.152,1.243L2.152,5.547L-2.152,5.547L-2.152,1.243L-5.88,-0.91L-3.728,-4.638L0,-2.485L3.728,-4.638L5.88,-0.91Z"></path>
41+
</svg>6</span>
42+
</div><svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="60" viewBox="0 0 640 60" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
43+
<style>
44+
.plot {
45+
display: block;
46+
background: white;
47+
height: auto;
48+
height: intrinsic;
49+
max-width: 100%;
50+
}
51+
52+
.plot text,
53+
.plot tspan {
54+
white-space: pre;
55+
}
56+
</style>
57+
<g aria-label="x-axis tick" fill="none" stroke="currentColor" transform="translate(0.5,0)">
58+
<path transform="translate(65,30)" d="M0,0L0,6"></path>
59+
<path transform="translate(150,30)" d="M0,0L0,6"></path>
60+
<path transform="translate(235,30)" d="M0,0L0,6"></path>
61+
<path transform="translate(320,30)" d="M0,0L0,6"></path>
62+
<path transform="translate(405,30)" d="M0,0L0,6"></path>
63+
<path transform="translate(490,30)" d="M0,0L0,6"></path>
64+
<path transform="translate(575,30)" d="M0,0L0,6"></path>
65+
</g>
66+
<g aria-label="x-axis tick label" transform="translate(0.5,9.5)">
67+
<text y="0.71em" transform="translate(65,30)">circle</text>
68+
<text y="0.71em" transform="translate(150,30)">cross</text>
69+
<text y="0.71em" transform="translate(235,30)">diamond</text>
70+
<text y="0.71em" transform="translate(320,30)">square</text>
71+
<text y="0.71em" transform="translate(405,30)">star</text>
72+
<text y="0.71em" transform="translate(490,30)">triangle</text>
73+
<text y="0.71em" transform="translate(575,30)">wye</text>
74+
</g>
75+
<g aria-label="dot" transform="translate(0.5,0.5)">
76+
<path transform="translate(65,15)" d="M4.5,0A4.5,4.5,0,1,1,-4.5,0A4.5,4.5,0,1,1,4.5,0" fill="rgb(35, 23, 27)"></path>
77+
<path transform="translate(150,15)" d="M-5.35,-1.783L-1.783,-1.783L-1.783,-5.35L1.783,-5.35L1.783,-1.783L5.35,-1.783L5.35,1.783L1.783,1.783L1.783,5.35L-1.783,5.35L-1.783,1.783L-5.35,1.783Z" fill="rgb(57, 135, 249)"></path>
78+
<path transform="translate(235,15)" d="M0,-7.423L4.285,0L0,7.423L-4.285,0Z" fill="rgb(46, 229, 174)"></path>
79+
<path transform="translate(320,15)" d="M-3.988,-3.988h7.976v7.976h-7.976Z" fill="rgb(149, 251, 81)"></path>
80+
<path transform="translate(405,15)" d="M0,-7.528L1.69,-2.326L7.16,-2.326L2.735,0.889L4.425,6.09L0,2.875L-4.425,6.09L-2.735,0.889L-7.16,-2.326L-1.69,-2.326Z" fill="rgb(254, 185, 39)"></path>
81+
<path transform="translate(490,15)" d="M0,-6.998L6.06,3.499L-6.06,3.499Z" fill="rgb(229, 72, 19)"></path>
82+
<path transform="translate(575,15)" d="M2.152,1.243L2.152,5.547L-2.152,5.547L-2.152,1.243L-5.88,-0.91L-3.728,-4.638L0,-2.485L3.728,-4.638L5.88,-0.91Z" fill="rgb(144, 12, 0)"></path>
83+
</g>
84+
</svg>
85+
</figure>

‎test/output/symbolSetStroke.svg

Lines changed: 43 additions & 0 deletions
Loading

‎test/output/symbolSetStrokeColor.html

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
<figure class="plot-d6a7b5-figure" style="max-width: initial;">
2+
<div class="plot-swatches plot-swatches-wrap">
3+
<style>
4+
.plot-swatches {
5+
font-family: system-ui, sans-serif;
6+
font-size: 10px;
7+
margin-bottom: 0.5em;
8+
}
9+
10+
.plot-swatch>svg {
11+
margin-right: 0.5em;
12+
overflow: visible;
13+
}
14+
15+
.plot-swatches-wrap {
16+
display: flex;
17+
align-items: center;
18+
min-height: 33px;
19+
flex-wrap: wrap;
20+
}
21+
22+
.plot-swatches-wrap .plot-swatch {
23+
display: inline-flex;
24+
align-items: center;
25+
margin-right: 1em;
26+
}
27+
</style><span class="plot-swatch"><svg viewBox="-8 -8 16 16" width="15" height="15" fill="none" fill-opacity="1" stroke="rgb(35, 23, 27)" stroke-opacity="1" stroke-width="1.5" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
28+
<path d="M4.5,0A4.5,4.5,0,1,1,-4.5,0A4.5,4.5,0,1,1,4.5,0"></path>
29+
</svg>0</span><span class="plot-swatch"><svg viewBox="-8 -8 16 16" width="15" height="15" fill="none" fill-opacity="1" stroke="rgb(57, 135, 249)" stroke-opacity="1" stroke-width="1.5" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
30+
<path d="M-6.873,0L6.873,0M0,6.873L0,-6.873"></path>
31+
</svg>1</span><span class="plot-swatch"><svg viewBox="-8 -8 16 16" width="15" height="15" fill="none" fill-opacity="1" stroke="rgb(46, 229, 174)" stroke-opacity="1" stroke-width="1.5" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
32+
<path d="M-4.87,-4.87L4.87,4.87M-4.87,4.87L4.87,-4.87"></path>
33+
</svg>2</span><span class="plot-swatch"><svg viewBox="-8 -8 16 16" width="15" height="15" fill="none" fill-opacity="1" stroke="rgb(149, 251, 81)" stroke-opacity="1" stroke-width="1.5" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
34+
<path d="M0,-5.443L4.714,2.721L-4.714,2.721Z"></path>
35+
</svg>3</span><span class="plot-swatch"><svg viewBox="-8 -8 16 16" width="15" height="15" fill="none" fill-opacity="1" stroke="rgb(254, 185, 39)" stroke-opacity="1" stroke-width="1.5" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
36+
<path d="M0,4.769L0,-4.769M-4.13,-2.384L4.13,2.384M-4.13,2.384L4.13,-2.384"></path>
37+
</svg>4</span><span class="plot-swatch"><svg viewBox="-8 -8 16 16" width="15" height="15" fill="none" fill-opacity="1" stroke="rgb(229, 72, 19)" stroke-opacity="1" stroke-width="1.5" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
38+
<path d="M3.534,3.534L3.534,-3.534L-3.534,-3.534L-3.534,3.534Z"></path>
39+
</svg>5</span><span class="plot-swatch"><svg viewBox="-8 -8 16 16" width="15" height="15" fill="none" fill-opacity="1" stroke="rgb(144, 12, 0)" stroke-opacity="1" stroke-width="1.5" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
40+
<path d="M0,-4.995L4.995,0L0,4.995L-4.995,0Z"></path>
41+
</svg>6</span>
42+
</div><svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="60" viewBox="0 0 640 60" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
43+
<style>
44+
.plot {
45+
display: block;
46+
background: white;
47+
height: auto;
48+
height: intrinsic;
49+
max-width: 100%;
50+
}
51+
52+
.plot text,
53+
.plot tspan {
54+
white-space: pre;
55+
}
56+
</style>
57+
<g aria-label="x-axis tick" fill="none" stroke="currentColor" transform="translate(0.5,0)">
58+
<path transform="translate(65,30)" d="M0,0L0,6"></path>
59+
<path transform="translate(150,30)" d="M0,0L0,6"></path>
60+
<path transform="translate(235,30)" d="M0,0L0,6"></path>
61+
<path transform="translate(320,30)" d="M0,0L0,6"></path>
62+
<path transform="translate(405,30)" d="M0,0L0,6"></path>
63+
<path transform="translate(490,30)" d="M0,0L0,6"></path>
64+
<path transform="translate(575,30)" d="M0,0L0,6"></path>
65+
</g>
66+
<g aria-label="x-axis tick label" transform="translate(0.5,9.5)">
67+
<text y="0.71em" transform="translate(65,30)">circle</text>
68+
<text y="0.71em" transform="translate(150,30)">cross</text>
69+
<text y="0.71em" transform="translate(235,30)">diamond</text>
70+
<text y="0.71em" transform="translate(320,30)">square</text>
71+
<text y="0.71em" transform="translate(405,30)">star</text>
72+
<text y="0.71em" transform="translate(490,30)">triangle</text>
73+
<text y="0.71em" transform="translate(575,30)">wye</text>
74+
</g>
75+
<g aria-label="dot" fill="none" stroke-width="1.5" transform="translate(0.5,0.5)">
76+
<path transform="translate(65,15)" d="M4.5,0A4.5,4.5,0,1,1,-4.5,0A4.5,4.5,0,1,1,4.5,0" stroke="rgb(35, 23, 27)"></path>
77+
<path transform="translate(150,15)" d="M-6.873,0L6.873,0M0,6.873L0,-6.873" stroke="rgb(57, 135, 249)"></path>
78+
<path transform="translate(235,15)" d="M-4.87,-4.87L4.87,4.87M-4.87,4.87L4.87,-4.87" stroke="rgb(46, 229, 174)"></path>
79+
<path transform="translate(320,15)" d="M0,-5.443L4.714,2.721L-4.714,2.721Z" stroke="rgb(149, 251, 81)"></path>
80+
<path transform="translate(405,15)" d="M0,4.769L0,-4.769M-4.13,-2.384L4.13,2.384M-4.13,2.384L4.13,-2.384" stroke="rgb(254, 185, 39)"></path>
81+
<path transform="translate(490,15)" d="M3.534,3.534L3.534,-3.534L-3.534,-3.534L-3.534,3.534Z" stroke="rgb(229, 72, 19)"></path>
82+
<path transform="translate(575,15)" d="M0,-4.995L4.995,0L0,4.995L-4.995,0Z" stroke="rgb(144, 12, 0)"></path>
83+
</g>
84+
</svg>
85+
</figure>

‎test/plots/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -287,6 +287,7 @@ export * from "./stargazers-hourly-group.js";
287287
export * from "./stargazers-hourly.js";
288288
export * from "./stargazers.js";
289289
export * from "./stocks-index.js";
290+
export * from "./symbol-set.js";
290291
export * from "./text-overflow.js";
291292
export * from "./this-is-just-to-say.js";
292293
export * from "./time-axis.js";

0 commit comments

Comments
 (0)