Skip to content

Commit 26b5d14

Browse files
Filmbostock
Fil
and
mbostock
authored
Empty bins fall back on the first element of their group (#1837)
* Empty bins fall back on the first element of their group for z, stroke and fill closes #1775 * test edge case --------- Co-authored-by: Mike Bostock <[email protected]>
1 parent 0dcec9f commit 26b5d14

File tree

7 files changed

+467
-3
lines changed

7 files changed

+467
-3
lines changed

‎src/transforms/bin.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -184,9 +184,9 @@ function binn(
184184
groupFacet.push(i++);
185185
groupData.push(reduceData.reduceIndex(b, data, extent));
186186
if (K) GK.push(k);
187-
if (Z) GZ.push(G === Z ? f : Z[b[0]]);
188-
if (F) GF.push(G === F ? f : F[b[0]]);
189-
if (S) GS.push(G === S ? f : S[b[0]]);
187+
if (Z) GZ.push(G === Z ? f : Z[(b.length > 0 ? b : g)[0]]);
188+
if (F) GF.push(G === F ? f : F[(b.length > 0 ? b : g)[0]]);
189+
if (S) GS.push(G === S ? f : S[(b.length > 0 ? b : g)[0]]);
190190
if (BX1) BX1.push(extent.x1), BX2.push(extent.x2);
191191
if (BY1) BY1.push(extent.y1), BY2.push(extent.y2);
192192
for (const o of outputs) o.reduce(b, extent);

‎test/output/binFillFirstEmpty.html

Lines changed: 183 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,183 @@
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 width="15" height="15" fill="#4e79a7" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
28+
<rect width="100%" height="100%"></rect>
29+
</svg>FEMALE</span><span class="plot-swatch"><svg width="15" height="15" fill="#f28e2c" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
30+
<rect width="100%" height="100%"></rect>
31+
</svg>MALE</span><span class="plot-swatch"><svg width="15" height="15" fill="#e15759" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
32+
<rect width="100%" height="100%"></rect>
33+
</svg>null</span>
34+
</div><svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
35+
<style>
36+
.plot {
37+
display: block;
38+
background: white;
39+
height: auto;
40+
height: intrinsic;
41+
max-width: 100%;
42+
}
43+
44+
.plot text,
45+
.plot tspan {
46+
white-space: pre;
47+
}
48+
</style>
49+
<g aria-label="y-axis tick" fill="none" stroke="currentColor" transform="translate(0,0.5)">
50+
<path transform="translate(40,370)" d="M0,0L-6,0"></path>
51+
<path transform="translate(40,345)" d="M0,0L-6,0"></path>
52+
<path transform="translate(40,320)" d="M0,0L-6,0"></path>
53+
<path transform="translate(40,295)" d="M0,0L-6,0"></path>
54+
<path transform="translate(40,270)" d="M0,0L-6,0"></path>
55+
<path transform="translate(40,244.99999999999997)" d="M0,0L-6,0"></path>
56+
<path transform="translate(40,220)" d="M0,0L-6,0"></path>
57+
<path transform="translate(40,195)" d="M0,0L-6,0"></path>
58+
<path transform="translate(40,170)" d="M0,0L-6,0"></path>
59+
<path transform="translate(40,145)" d="M0,0L-6,0"></path>
60+
<path transform="translate(40,120)" d="M0,0L-6,0"></path>
61+
<path transform="translate(40,95)" d="M0,0L-6,0"></path>
62+
<path transform="translate(40,70.00000000000001)" d="M0,0L-6,0"></path>
63+
<path transform="translate(40,44.999999999999986)" d="M0,0L-6,0"></path>
64+
<path transform="translate(40,20)" d="M0,0L-6,0"></path>
65+
</g>
66+
<g aria-label="y-axis tick label" text-anchor="end" font-variant="tabular-nums" transform="translate(-8.5,0.5)">
67+
<text y="0.32em" transform="translate(40,370)">0</text>
68+
<text y="0.32em" transform="translate(40,345)">1</text>
69+
<text y="0.32em" transform="translate(40,320)">2</text>
70+
<text y="0.32em" transform="translate(40,295)">3</text>
71+
<text y="0.32em" transform="translate(40,270)">4</text>
72+
<text y="0.32em" transform="translate(40,244.99999999999997)">5</text>
73+
<text y="0.32em" transform="translate(40,220)">6</text>
74+
<text y="0.32em" transform="translate(40,195)">7</text>
75+
<text y="0.32em" transform="translate(40,170)">8</text>
76+
<text y="0.32em" transform="translate(40,145)">9</text>
77+
<text y="0.32em" transform="translate(40,120)">10</text>
78+
<text y="0.32em" transform="translate(40,95)">11</text>
79+
<text y="0.32em" transform="translate(40,70.00000000000001)">12</text>
80+
<text y="0.32em" transform="translate(40,44.999999999999986)">13</text>
81+
<text y="0.32em" transform="translate(40,20)">14</text>
82+
</g>
83+
<g aria-label="y-axis label" text-anchor="start" transform="translate(-36.5,-16.5)">
84+
<text y="0.71em" transform="translate(40,20)">↑ Frequency</text>
85+
</g>
86+
<g aria-label="x-axis tick" fill="none" stroke="currentColor" transform="translate(0.5,0)">
87+
<path transform="translate(87.67123287671232,370)" d="M0,0L0,6"></path>
88+
<path transform="translate(167.12328767123287,370)" d="M0,0L0,6"></path>
89+
<path transform="translate(246.5753424657534,370)" d="M0,0L0,6"></path>
90+
<path transform="translate(326.027397260274,370)" d="M0,0L0,6"></path>
91+
<path transform="translate(405.4794520547945,370)" d="M0,0L0,6"></path>
92+
<path transform="translate(484.93150684931504,370)" d="M0,0L0,6"></path>
93+
<path transform="translate(564.3835616438356,370)" d="M0,0L0,6"></path>
94+
</g>
95+
<g aria-label="x-axis tick label" font-variant="tabular-nums" transform="translate(0.5,9.5)">
96+
<text y="0.71em" transform="translate(87.67123287671232,370)">3,000</text>
97+
<text y="0.71em" transform="translate(167.12328767123287,370)">3,500</text>
98+
<text y="0.71em" transform="translate(246.5753424657534,370)">4,000</text>
99+
<text y="0.71em" transform="translate(326.027397260274,370)">4,500</text>
100+
<text y="0.71em" transform="translate(405.4794520547945,370)">5,000</text>
101+
<text y="0.71em" transform="translate(484.93150684931504,370)">5,500</text>
102+
<text y="0.71em" transform="translate(564.3835616438356,370)">6,000</text>
103+
</g>
104+
<g aria-label="x-axis label" text-anchor="end" transform="translate(17.5,27.5)">
105+
<text transform="translate(620,370)">body_mass_g →</text>
106+
</g>
107+
<g aria-label="rect">
108+
<rect x="41" y="344.5" width="6.945205479452056" height="26" fill="#4e79a7"></rect>
109+
<rect x="48.945205479452056" y="369.5" width="6.945205479452056" height="1" fill="#f28e2c"></rect>
110+
<rect x="56.89041095890411" y="369.5" width="6.945205479452056" height="1" fill="#f28e2c"></rect>
111+
<rect x="64.83561643835617" y="319.5" width="6.945205479452056" height="51" fill="#4e79a7"></rect>
112+
<rect x="72.78082191780823" y="244.49999999999997" width="6.945205479452056" height="126.00000000000003" fill="#4e79a7"></rect>
113+
<rect x="80.72602739726028" y="344.5" width="6.945205479452042" height="26" fill="#e15759"></rect>
114+
<rect x="88.67123287671232" y="319.5" width="6.945205479452056" height="51" fill="#4e79a7"></rect>
115+
<rect x="96.61643835616438" y="244.49999999999997" width="6.945205479452056" height="126.00000000000003" fill="#4e79a7"></rect>
116+
<rect x="104.56164383561644" y="344.5" width="6.945205479452056" height="26" fill="#4e79a7"></rect>
117+
<rect x="112.5068493150685" y="219.5" width="6.945205479452056" height="151" fill="#4e79a7"></rect>
118+
<rect x="120.45205479452055" y="244.49999999999997" width="6.945205479452042" height="126.00000000000003" fill="#4e79a7"></rect>
119+
<rect x="128.3972602739726" y="219.5" width="6.945205479452056" height="151" fill="#4e79a7"></rect>
120+
<rect x="136.34246575342465" y="94.5" width="6.945205479452056" height="276" fill="#e15759"></rect>
121+
<rect x="144.2876712328767" y="244.49999999999997" width="6.945205479452056" height="126.00000000000003" fill="#4e79a7"></rect>
122+
<rect x="152.23287671232876" y="119.5" width="6.945205479452056" height="251" fill="#4e79a7"></rect>
123+
<rect x="160.17808219178082" y="94.5" width="6.945205479452056" height="276" fill="#4e79a7"></rect>
124+
<rect x="168.12328767123287" y="144.5" width="6.945205479452056" height="226" fill="#4e79a7"></rect>
125+
<rect x="176.06849315068493" y="119.5" width="6.945205479452056" height="251" fill="#f28e2c"></rect>
126+
<rect x="184.013698630137" y="169.5" width="6.945205479452056" height="201" fill="#4e79a7"></rect>
127+
<rect x="191.95890410958904" y="169.5" width="6.945205479452056" height="201" fill="#f28e2c"></rect>
128+
<rect x="199.9041095890411" y="19.5" width="6.945205479452028" height="351" fill="#e15759"></rect>
129+
<rect x="207.84931506849313" y="144.5" width="6.945205479452056" height="226" fill="#f28e2c"></rect>
130+
<rect x="215.79452054794518" y="44.499999999999986" width="6.945205479452056" height="326" fill="#4e79a7"></rect>
131+
<rect x="223.73972602739724" y="319.5" width="6.945205479452056" height="51" fill="#f28e2c"></rect>
132+
<rect x="231.6849315068493" y="119.5" width="6.945205479452056" height="251" fill="#f28e2c"></rect>
133+
<rect x="239.63013698630135" y="94.5" width="6.945205479452056" height="276" fill="#f28e2c"></rect>
134+
<rect x="247.5753424657534" y="244.49999999999997" width="6.945205479452056" height="126.00000000000003" fill="#f28e2c"></rect>
135+
<rect x="255.52054794520546" y="194.5" width="6.945205479452056" height="176" fill="#f28e2c"></rect>
136+
<rect x="263.4657534246575" y="244.49999999999997" width="6.945205479452056" height="126.00000000000003" fill="#f28e2c"></rect>
137+
<rect x="271.4109589041096" y="219.5" width="6.945205479452056" height="151" fill="#f28e2c"></rect>
138+
<rect x="279.35616438356163" y="244.49999999999997" width="6.945205479452056" height="126.00000000000003" fill="#f28e2c"></rect>
139+
<rect x="287.3013698630137" y="219.5" width="6.945205479452056" height="151" fill="#e15759"></rect>
140+
<rect x="295.24657534246575" y="169.5" width="6.945205479452056" height="201" fill="#f28e2c"></rect>
141+
<rect x="303.1917808219178" y="294.5" width="6.945205479452056" height="76" fill="#f28e2c"></rect>
142+
<rect x="311.13698630136986" y="169.5" width="6.9452054794519995" height="201" fill="#f28e2c"></rect>
143+
<rect x="319.08219178082186" y="219.5" width="6.945205479452113" height="151" fill="#f28e2c"></rect>
144+
<rect x="327.027397260274" y="294.5" width="6.945205479452056" height="76" fill="#f28e2c"></rect>
145+
<rect x="334.972602739726" y="294.5" width="6.945205479452056" height="76" fill="#f28e2c"></rect>
146+
<rect x="342.9178082191781" y="194.5" width="6.945205479452056" height="176" fill="#f28e2c"></rect>
147+
<rect x="350.86301369863014" y="219.5" width="6.945205479452056" height="151" fill="#f28e2c"></rect>
148+
<rect x="358.8082191780822" y="144.5" width="6.945205479452056" height="226" fill="#f28e2c"></rect>
149+
<rect x="366.75342465753425" y="219.5" width="6.9452054794519995" height="151" fill="#f28e2c"></rect>
150+
<rect x="374.69863013698625" y="294.5" width="6.945205479452113" height="76" fill="#f28e2c"></rect>
151+
<rect x="382.64383561643837" y="194.5" width="6.9452054794519995" height="176" fill="#4e79a7"></rect>
152+
<rect x="390.58904109589037" y="269.5" width="6.945205479452113" height="101" fill="#4e79a7"></rect>
153+
<rect x="398.5342465753425" y="294.5" width="6.9452054794519995" height="76" fill="#4e79a7"></rect>
154+
<rect x="406.4794520547945" y="219.5" width="6.945205479452113" height="151" fill="#4e79a7"></rect>
155+
<rect x="414.4246575342466" y="294.5" width="6.9452054794519995" height="76" fill="#f28e2c"></rect>
156+
<rect x="422.3698630136986" y="294.5" width="6.945205479452113" height="76" fill="#f28e2c"></rect>
157+
<rect x="430.3150684931507" y="319.5" width="6.9452054794519995" height="51" fill="#f28e2c"></rect>
158+
<rect x="438.2602739726027" y="269.5" width="6.945205479452113" height="101" fill="#f28e2c"></rect>
159+
<rect x="446.2054794520548" y="294.5" width="6.9452054794519995" height="76" fill="#f28e2c"></rect>
160+
<rect x="454.1506849315068" y="269.5" width="6.945205479452056" height="101" fill="#f28e2c"></rect>
161+
<rect x="462.0958904109589" y="294.5" width="6.945205479452056" height="76" fill="#f28e2c"></rect>
162+
<rect x="470.04109589041093" y="244.49999999999997" width="6.945205479452113" height="126.00000000000003" fill="#f28e2c"></rect>
163+
<rect x="477.98630136986304" y="344.5" width="6.9452054794519995" height="26" fill="#f28e2c"></rect>
164+
<rect x="485.93150684931504" y="244.49999999999997" width="6.945205479452056" height="126.00000000000003" fill="#f28e2c"></rect>
165+
<rect x="493.8767123287671" y="219.5" width="6.945205479452056" height="151" fill="#f28e2c"></rect>
166+
<rect x="501.82191780821915" y="319.5" width="6.945205479452113" height="51" fill="#f28e2c"></rect>
167+
<rect x="509.76712328767127" y="294.5" width="6.9452054794519995" height="76" fill="#f28e2c"></rect>
168+
<rect x="517.7123287671233" y="244.49999999999997" width="6.94520547945217" height="126.00000000000003" fill="#f28e2c"></rect>
169+
<rect x="525.6575342465754" y="344.5" width="6.945205479451943" height="26" fill="#f28e2c"></rect>
170+
<rect x="533.6027397260274" y="319.5" width="6.945205479452056" height="51" fill="#f28e2c"></rect>
171+
<rect x="541.5479452054794" y="294.5" width="6.945205479452056" height="76" fill="#f28e2c"></rect>
172+
<rect x="549.4931506849315" y="369.5" width="6.945205479452056" height="1" fill="#f28e2c"></rect>
173+
<rect x="557.4383561643835" y="319.5" width="6.945205479452056" height="51" fill="#f28e2c"></rect>
174+
<rect x="565.3835616438356" y="319.5" width="6.945205479452056" height="51" fill="#f28e2c"></rect>
175+
<rect x="573.3287671232877" y="344.5" width="6.945205479452056" height="26" fill="#f28e2c"></rect>
176+
<rect x="581.2739726027397" y="369.5" width="6.94520547945217" height="1" fill="#f28e2c"></rect>
177+
<rect x="589.2191780821919" y="369.5" width="6.945205479451829" height="1" fill="#f28e2c"></rect>
178+
<rect x="597.1643835616437" y="369.5" width="6.94520547945217" height="1" fill="#f28e2c"></rect>
179+
<rect x="605.1095890410959" y="369.5" width="6.945205479452056" height="1" fill="#f28e2c"></rect>
180+
<rect x="613.054794520548" y="344.5" width="6.945205479452056" height="26" fill="#f28e2c"></rect>
181+
</g>
182+
</svg>
183+
</figure>

‎test/output/integerIntervalArea.html

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
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 width="15" height="15" fill="#4e79a7" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
28+
<rect width="100%" height="100%"></rect>
29+
</svg>a</span><span class="plot-swatch"><svg width="15" height="15" fill="#f28e2c" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
30+
<rect width="100%" height="100%"></rect>
31+
</svg>b</span>
32+
</div><svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
33+
<style>
34+
.plot {
35+
display: block;
36+
background: white;
37+
height: auto;
38+
height: intrinsic;
39+
max-width: 100%;
40+
}
41+
42+
.plot text,
43+
.plot tspan {
44+
white-space: pre;
45+
}
46+
</style>
47+
<g aria-label="y-axis tick" fill="none" stroke="currentColor" transform="translate(0,0.5)">
48+
<path transform="translate(40,370)" d="M0,0L-6,0"></path>
49+
<path transform="translate(40,326.25)" d="M0,0L-6,0"></path>
50+
<path transform="translate(40,282.5)" d="M0,0L-6,0"></path>
51+
<path transform="translate(40,238.75)" d="M0,0L-6,0"></path>
52+
<path transform="translate(40,195)" d="M0,0L-6,0"></path>
53+
<path transform="translate(40,151.25)" d="M0,0L-6,0"></path>
54+
<path transform="translate(40,107.5)" d="M0,0L-6,0"></path>
55+
<path transform="translate(40,63.75)" d="M0,0L-6,0"></path>
56+
<path transform="translate(40,20)" d="M0,0L-6,0"></path>
57+
</g>
58+
<g aria-label="y-axis tick label" text-anchor="end" font-variant="tabular-nums" transform="translate(-8.5,0.5)">
59+
<text y="0.32em" transform="translate(40,370)">0</text>
60+
<text y="0.32em" transform="translate(40,326.25)">2</text>
61+
<text y="0.32em" transform="translate(40,282.5)">4</text>
62+
<text y="0.32em" transform="translate(40,238.75)">6</text>
63+
<text y="0.32em" transform="translate(40,195)">8</text>
64+
<text y="0.32em" transform="translate(40,151.25)">10</text>
65+
<text y="0.32em" transform="translate(40,107.5)">12</text>
66+
<text y="0.32em" transform="translate(40,63.75)">14</text>
67+
<text y="0.32em" transform="translate(40,20)">16</text>
68+
</g>
69+
<g aria-label="y-axis label" text-anchor="start" transform="translate(-36.5,-16.5)">
70+
<text y="0.71em" transform="translate(40,20)">↑ y</text>
71+
</g>
72+
<g aria-label="x-axis tick" fill="none" stroke="currentColor" transform="translate(0.5,0)">
73+
<path transform="translate(69,370)" d="M0,0L0,6"></path>
74+
<path transform="translate(127,370)" d="M0,0L0,6"></path>
75+
<path transform="translate(185,370)" d="M0,0L0,6"></path>
76+
<path transform="translate(243,370)" d="M0,0L0,6"></path>
77+
<path transform="translate(301,370)" d="M0,0L0,6"></path>
78+
<path transform="translate(359,370)" d="M0,0L0,6"></path>
79+
<path transform="translate(417,370)" d="M0,0L0,6"></path>
80+
<path transform="translate(475,370)" d="M0,0L0,6"></path>
81+
<path transform="translate(533,370)" d="M0,0L0,6"></path>
82+
<path transform="translate(591,370)" d="M0,0L0,6"></path>
83+
</g>
84+
<g aria-label="x-axis tick label" font-variant="tabular-nums" transform="translate(0.5,9.5)">
85+
<text y="0.71em" transform="translate(69,370)">3</text>
86+
<text y="0.71em" transform="translate(127,370)">4</text>
87+
<text y="0.71em" transform="translate(185,370)">5</text>
88+
<text y="0.71em" transform="translate(243,370)">6</text>
89+
<text y="0.71em" transform="translate(301,370)">7</text>
90+
<text y="0.71em" transform="translate(359,370)">8</text>
91+
<text y="0.71em" transform="translate(417,370)">9</text>
92+
<text y="0.71em" transform="translate(475,370)">10</text>
93+
<text y="0.71em" transform="translate(533,370)">11</text>
94+
<text y="0.71em" transform="translate(591,370)">12</text>
95+
</g>
96+
<g aria-label="x-axis label" text-anchor="end" transform="translate(17.5,27.5)">
97+
<text transform="translate(620,370)">x →</text>
98+
</g>
99+
<g aria-label="area" fill-opacity="0.7" stroke-width="2" stroke-linejoin="round" stroke-linecap="round">
100+
<path fill="#4e79a7" stroke="#4e79a7" d="M40,260.625L330,216.875L620,370L620,370L330,370L40,370Z"></path>
101+
<path fill="#f28e2c" stroke="#f28e2c" d="M40,260.625L330,20L620,282.5L620,370L330,216.875L40,260.625Z"></path>
102+
</g>
103+
<g aria-label="tip" fill="white" stroke="currentColor" pointer-events="none" text-anchor="start" transform="translate(0.5,0.5)"></g>
104+
</svg>
105+
</figure>

0 commit comments

Comments
 (0)