Skip to content

Commit 90d20a5

Browse files
mbostockmbostock
authored
fix misaligned range (#1633)
* fix misaligned range * warn on extra elements
1 parent 8ebba27 commit 90d20a5

10 files changed

+614
-10
lines changed

‎src/scales/diverging.js

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,12 @@ import {
88
scaleDivergingPow,
99
scaleDivergingSymlog
1010
} from "d3";
11-
import {positive, negative} from "../defined.js";
11+
import {negative, positive} from "../defined.js";
12+
import {arrayify} from "../options.js";
13+
import {warn} from "../warnings.js";
14+
import {color, registry} from "./index.js";
15+
import {flip, inferDomain, interpolatePiecewise, maybeInterpolator} from "./quantitative.js";
1216
import {quantitativeScheme} from "./schemes.js";
13-
import {registry, color} from "./index.js";
14-
import {inferDomain, maybeInterpolator, flip, interpolatePiecewise} from "./quantitative.js";
1517

1618
function createScaleD(
1719
key,
@@ -37,7 +39,10 @@ function createScaleD(
3739
}
3840
) {
3941
pivot = +pivot;
42+
domain = arrayify(domain);
4043
let [min, max] = domain;
44+
if (domain.length > 2) warn(`Warning: the diverging ${key} scale domain contains extra elements.`);
45+
4146
if (descending(min, max) < 0) ([min, max] = [max, min]), (reverse = !reverse);
4247
min = Math.min(min, pivot);
4348
max = Math.max(max, pivot);

‎src/scales/quantitative.js

Lines changed: 21 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,25 +7,26 @@ import {
77
interpolateNumber,
88
interpolateRgb,
99
interpolateRound,
10-
min,
1110
max,
1211
median,
12+
min,
1313
quantile,
1414
quantize,
1515
reverse as reverseof,
16+
scaleIdentity,
1617
scaleLinear,
1718
scaleLog,
1819
scalePow,
1920
scaleQuantile,
2021
scaleSymlog,
2122
scaleThreshold,
22-
scaleIdentity,
2323
ticks
2424
} from "d3";
25-
import {positive, negative, finite} from "../defined.js";
26-
import {arrayify, constant, orderof, slice, maybeNiceInterval, maybeRangeInterval} from "../options.js";
25+
import {finite, negative, positive} from "../defined.js";
26+
import {arrayify, constant, maybeNiceInterval, maybeRangeInterval, orderof, slice} from "../options.js";
27+
import {warn} from "../warnings.js";
28+
import {color, length, opacity, radius, registry} from "./index.js";
2729
import {ordinalRange, quantitativeScheme} from "./schemes.js";
28-
import {registry, radius, opacity, color, length} from "./index.js";
2930

3031
export const flip = (i) => (t) => i(1 - t);
3132
const unit = [0, 1];
@@ -82,6 +83,20 @@ export function createScaleQ(
8283
if (type === "cyclical" || type === "sequential") type = "linear"; // shorthand for color schemes
8384
reverse = !!reverse;
8485

86+
// If an explicit range is specified, ensure that the domain and range have
87+
// the same length; truncate to whichever one is shorter.
88+
if (range !== undefined) {
89+
const n = (domain = arrayify(domain)).length;
90+
const m = (range = arrayify(range)).length;
91+
if (n > m) {
92+
domain = domain.slice(0, m);
93+
warn(`Warning: the ${key} scale domain contains extra elements.`);
94+
} else if (m > n) {
95+
range = range.slice(0, n);
96+
warn(`Warning: the ${key} scale range contains extra elements.`);
97+
}
98+
}
99+
85100
// Sometimes interpolate is a named interpolator, such as "lab" for Lab color
86101
// space. Other times interpolate is a function that takes two arguments and
87102
// is used in conjunction with the range. And other times the interpolate
@@ -113,8 +128,7 @@ export function createScaleQ(
113128
const [min, max] = extent(domain);
114129
if (min > 0 || max < 0) {
115130
domain = slice(domain);
116-
if (orderof(domain) !== Math.sign(min)) domain[domain.length - 1] = 0;
117-
// [2, 1] or [-2, -1]
131+
if (orderof(domain) !== Math.sign(min)) domain[domain.length - 1] = 0; // [2, 1] or [-2, -1]
118132
else domain[0] = 0; // [1, 2] or [-1, -2]
119133
}
120134
}

‎test/output/colorMisalignedDivergingDomain.html

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
<figure style="max-width: initial;"><svg class="plot-ramp" font-family="system-ui, sans-serif" font-size="10" width="240" height="50" viewBox="0 0 240 50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
2+
<style>
3+
.plot-ramp {
4+
display: block;
5+
background: white;
6+
height: auto;
7+
height: intrinsic;
8+
max-width: 100%;
9+
overflow: visible;
10+
}
11+
12+
.plot-ramp text {
13+
white-space: pre;
14+
}
15+
</style>
16+
<image x="0" y="18" width="240" height="10" preserveAspectRatio="none" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAABCAYAAAAxWXB3AAAABmJLR0QA/wD/AP+gvaeTAAAA2ElEQVQ4jXWLwZEDMAgDV1BIykv/BRjuYWxjz+XBSFoJffmkC1ziVfvJhduzsfK2emHFzFp+Tr68YS5kwnzm1cl7N7nc9mb3bsjs2pw8vZr/xaf6lbmyI+vMoTjWsjm0Hjt/mCEdPtVA7VeLTc21VzsTyMjGUgJKdxYpkRhIJCJh6puT44FYOSFeTQjy+My9X/4/HbFyY+VHHL78aD+bBcVz85UvFmy293F29/buo/Xx8H3V5cMzk4jYfGqQ2XwkGVF97IuMK89NkDEql45R3Xi6ftWPlw/+AP61XqZckQ8kAAAAAElFTkSuQmCC"></image>
17+
<g transform="translate(0,28)" fill="none" text-anchor="middle" font-variant="tabular-nums">
18+
<g class="tick" opacity="1" transform="translate(24.5,0)">
19+
<line stroke="currentColor" y2="6" y1="-10"></line>
20+
<text fill="currentColor" y="9" dy="0.71em">−4</text>
21+
</g>
22+
<g class="tick" opacity="1" transform="translate(72.5,0)">
23+
<line stroke="currentColor" y2="6" y1="-10"></line>
24+
<text fill="currentColor" y="9" dy="0.71em">−2</text>
25+
</g>
26+
<g class="tick" opacity="1" transform="translate(120.5,0)">
27+
<line stroke="currentColor" y2="6" y1="-10"></line>
28+
<text fill="currentColor" y="9" dy="0.71em">0</text>
29+
</g>
30+
<g class="tick" opacity="1" transform="translate(168.5,0)">
31+
<line stroke="currentColor" y2="6" y1="-10"></line>
32+
<text fill="currentColor" y="9" dy="0.71em">2</text>
33+
</g>
34+
<g class="tick" opacity="1" transform="translate(216.5,0)">
35+
<line stroke="currentColor" y2="6" y1="-10"></line>
36+
<text fill="currentColor" y="9" dy="0.71em">4</text>
37+
</g>
38+
</g>
39+
</svg><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">
40+
<style>
41+
.plot {
42+
display: block;
43+
background: white;
44+
height: auto;
45+
height: intrinsic;
46+
max-width: 100%;
47+
}
48+
49+
.plot text,
50+
.plot tspan {
51+
white-space: pre;
52+
}
53+
</style>
54+
<g aria-label="x-axis tick" fill="none" stroke="currentColor" transform="translate(25,0)">
55+
<path transform="translate(26,30)" d="M0,0L0,6"></path>
56+
<path transform="translate(80,30)" d="M0,0L0,6"></path>
57+
<path transform="translate(134,30)" d="M0,0L0,6"></path>
58+
<path transform="translate(188,30)" d="M0,0L0,6"></path>
59+
<path transform="translate(242,30)" d="M0,0L0,6"></path>
60+
<path transform="translate(296,30)" d="M0,0L0,6"></path>
61+
<path transform="translate(350,30)" d="M0,0L0,6"></path>
62+
<path transform="translate(404,30)" d="M0,0L0,6"></path>
63+
<path transform="translate(458,30)" d="M0,0L0,6"></path>
64+
<path transform="translate(512,30)" d="M0,0L0,6"></path>
65+
<path transform="translate(566,30)" d="M0,0L0,6"></path>
66+
</g>
67+
<g aria-label="x-axis tick label" transform="translate(25,9.5)">
68+
<text y="0.71em" transform="translate(26,30)">-5</text>
69+
<text y="0.71em" transform="translate(80,30)">-4</text>
70+
<text y="0.71em" transform="translate(134,30)">-3</text>
71+
<text y="0.71em" transform="translate(188,30)">-2</text>
72+
<text y="0.71em" transform="translate(242,30)">-1</text>
73+
<text y="0.71em" transform="translate(296,30)">0</text>
74+
<text y="0.71em" transform="translate(350,30)">1</text>
75+
<text y="0.71em" transform="translate(404,30)">2</text>
76+
<text y="0.71em" transform="translate(458,30)">3</text>
77+
<text y="0.71em" transform="translate(512,30)">4</text>
78+
<text y="0.71em" transform="translate(566,30)">5</text>
79+
</g>
80+
<g aria-label="cell">
81+
<rect x="26" width="49" y="0" height="30" fill="rgb(103, 0, 31)"></rect>
82+
<rect x="80" width="49" y="0" height="30" fill="rgb(172, 32, 47)"></rect>
83+
<rect x="134" width="49" y="0" height="30" fill="rgb(213, 95, 80)"></rect>
84+
<rect x="188" width="49" y="0" height="30" fill="rgb(241, 163, 133)"></rect>
85+
<rect x="242" width="49" y="0" height="30" fill="rgb(251, 215, 196)"></rect>
86+
<rect x="296" width="49" y="0" height="30" fill="rgb(242, 239, 238)"></rect>
87+
<rect x="350" width="49" y="0" height="30" fill="rgb(205, 227, 238)"></rect>
88+
<rect x="404" width="49" y="0" height="30" fill="rgb(143, 194, 221)"></rect>
89+
<rect x="458" width="49" y="0" height="30" fill="rgb(75, 148, 196)"></rect>
90+
<rect x="512" width="49" y="0" height="30" fill="rgb(34, 101, 163)"></rect>
91+
<rect x="566" width="49" y="0" height="30" fill="rgb(5, 48, 97)"></rect>
92+
</g>
93+
<text x="640" y="20" dy="-1em" text-anchor="end" font-family="initial">⚠️<title>1 warning. Please check the console.</title></text>
94+
</svg></figure>

‎test/output/colorMisalignedLinearDomain.html

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
<figure style="max-width: initial;"><svg class="plot-ramp" font-family="system-ui, sans-serif" font-size="10" width="240" height="50" viewBox="0 0 240 50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
2+
<style>
3+
.plot-ramp {
4+
display: block;
5+
background: white;
6+
height: auto;
7+
height: intrinsic;
8+
max-width: 100%;
9+
overflow: visible;
10+
}
11+
12+
.plot-ramp text {
13+
white-space: pre;
14+
}
15+
</style>
16+
<image x="0" y="18" width="240" height="10" preserveAspectRatio="none" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAABCAYAAAAxWXB3AAAABmJLR0QA/wD/AP+gvaeTAAAAGElEQVQ4jWP8z8Dw/z8DI8MoHsWjeORhABlhAQ9+GPb9AAAAAElFTkSuQmCC"></image>
17+
<g transform="translate(0,28)" fill="none" text-anchor="middle" font-variant="tabular-nums">
18+
<g class="tick" opacity="1" transform="translate(0.5,0)">
19+
<line stroke="currentColor" y2="6" y1="-10"></line>
20+
<text fill="currentColor" y="9" dy="0.71em">0</text>
21+
</g>
22+
<g class="tick" opacity="1" transform="translate(48.5,0)">
23+
<line stroke="currentColor" y2="6" y1="-10"></line>
24+
<text fill="currentColor" y="9" dy="0.71em">2</text>
25+
</g>
26+
<g class="tick" opacity="1" transform="translate(96.5,0)">
27+
<line stroke="currentColor" y2="6" y1="-10"></line>
28+
<text fill="currentColor" y="9" dy="0.71em">4</text>
29+
</g>
30+
<g class="tick" opacity="1" transform="translate(144.5,0)">
31+
<line stroke="currentColor" y2="6" y1="-10"></line>
32+
<text fill="currentColor" y="9" dy="0.71em">6</text>
33+
</g>
34+
<g class="tick" opacity="1" transform="translate(192.5,0)">
35+
<line stroke="currentColor" y2="6" y1="-10"></line>
36+
<text fill="currentColor" y="9" dy="0.71em">8</text>
37+
</g>
38+
<g class="tick" opacity="1" transform="translate(240.5,0)">
39+
<line stroke="currentColor" y2="6" y1="-10"></line>
40+
<text fill="currentColor" y="9" dy="0.71em">10</text>
41+
</g>
42+
</g>
43+
</svg><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">
44+
<style>
45+
.plot {
46+
display: block;
47+
background: white;
48+
height: auto;
49+
height: intrinsic;
50+
max-width: 100%;
51+
}
52+
53+
.plot text,
54+
.plot tspan {
55+
white-space: pre;
56+
}
57+
</style>
58+
<g aria-label="x-axis tick" fill="none" stroke="currentColor" transform="translate(25,0)">
59+
<path transform="translate(26,30)" d="M0,0L0,6"></path>
60+
<path transform="translate(80,30)" d="M0,0L0,6"></path>
61+
<path transform="translate(134,30)" d="M0,0L0,6"></path>
62+
<path transform="translate(188,30)" d="M0,0L0,6"></path>
63+
<path transform="translate(242,30)" d="M0,0L0,6"></path>
64+
<path transform="translate(296,30)" d="M0,0L0,6"></path>
65+
<path transform="translate(350,30)" d="M0,0L0,6"></path>
66+
<path transform="translate(404,30)" d="M0,0L0,6"></path>
67+
<path transform="translate(458,30)" d="M0,0L0,6"></path>
68+
<path transform="translate(512,30)" d="M0,0L0,6"></path>
69+
<path transform="translate(566,30)" d="M0,0L0,6"></path>
70+
</g>
71+
<g aria-label="x-axis tick label" transform="translate(25,9.5)">
72+
<text y="0.71em" transform="translate(26,30)">0</text>
73+
<text y="0.71em" transform="translate(80,30)">1</text>
74+
<text y="0.71em" transform="translate(134,30)">2</text>
75+
<text y="0.71em" transform="translate(188,30)">3</text>
76+
<text y="0.71em" transform="translate(242,30)">4</text>
77+
<text y="0.71em" transform="translate(296,30)">5</text>
78+
<text y="0.71em" transform="translate(350,30)">6</text>
79+
<text y="0.71em" transform="translate(404,30)">7</text>
80+
<text y="0.71em" transform="translate(458,30)">8</text>
81+
<text y="0.71em" transform="translate(512,30)">9</text>
82+
<text y="0.71em" transform="translate(566,30)">10</text>
83+
</g>
84+
<g aria-label="cell">
85+
<rect x="26" width="49" y="0" height="30" fill="rgb(255, 0, 0)"></rect>
86+
<rect x="80" width="49" y="0" height="30" fill="rgb(230, 0, 26)"></rect>
87+
<rect x="134" width="49" y="0" height="30" fill="rgb(204, 0, 51)"></rect>
88+
<rect x="188" width="49" y="0" height="30" fill="rgb(179, 0, 77)"></rect>
89+
<rect x="242" width="49" y="0" height="30" fill="rgb(153, 0, 102)"></rect>
90+
<rect x="296" width="49" y="0" height="30" fill="rgb(128, 0, 128)"></rect>
91+
<rect x="350" width="49" y="0" height="30" fill="rgb(102, 0, 153)"></rect>
92+
<rect x="404" width="49" y="0" height="30" fill="rgb(77, 0, 179)"></rect>
93+
<rect x="458" width="49" y="0" height="30" fill="rgb(51, 0, 204)"></rect>
94+
<rect x="512" width="49" y="0" height="30" fill="rgb(26, 0, 230)"></rect>
95+
<rect x="566" width="49" y="0" height="30" fill="rgb(0, 0, 255)"></rect>
96+
</g>
97+
<text x="640" y="20" dy="-1em" text-anchor="end" font-family="initial">⚠️<title>1 warning. Please check the console.</title></text>
98+
</svg></figure>

‎test/output/colorMisalignedLinearDomainReverse.html

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
<figure style="max-width: initial;"><svg class="plot-ramp" font-family="system-ui, sans-serif" font-size="10" width="240" height="50" viewBox="0 0 240 50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
2+
<style>
3+
.plot-ramp {
4+
display: block;
5+
background: white;
6+
height: auto;
7+
height: intrinsic;
8+
max-width: 100%;
9+
overflow: visible;
10+
}
11+
12+
.plot-ramp text {
13+
white-space: pre;
14+
}
15+
</style>
16+
<image x="0" y="18" width="240" height="10" preserveAspectRatio="none" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAABCAYAAAAxWXB3AAAABmJLR0QA/wD/AP+gvaeTAAAAGElEQVQ4jWP8z8Dw/z8DI8MoHsWjeORhABlhAQ9+GPb9AAAAAElFTkSuQmCC"></image>
17+
<g transform="translate(0,28)" fill="none" text-anchor="middle" font-variant="tabular-nums">
18+
<g class="tick" opacity="1" transform="translate(0.5,0)">
19+
<line stroke="currentColor" y2="6" y1="-10"></line>
20+
<text fill="currentColor" y="9" dy="0.71em">10</text>
21+
</g>
22+
<g class="tick" opacity="1" transform="translate(48.5,0)">
23+
<line stroke="currentColor" y2="6" y1="-10"></line>
24+
<text fill="currentColor" y="9" dy="0.71em">8</text>
25+
</g>
26+
<g class="tick" opacity="1" transform="translate(96.5,0)">
27+
<line stroke="currentColor" y2="6" y1="-10"></line>
28+
<text fill="currentColor" y="9" dy="0.71em">6</text>
29+
</g>
30+
<g class="tick" opacity="1" transform="translate(144.5,0)">
31+
<line stroke="currentColor" y2="6" y1="-10"></line>
32+
<text fill="currentColor" y="9" dy="0.71em">4</text>
33+
</g>
34+
<g class="tick" opacity="1" transform="translate(192.5,0)">
35+
<line stroke="currentColor" y2="6" y1="-10"></line>
36+
<text fill="currentColor" y="9" dy="0.71em">2</text>
37+
</g>
38+
<g class="tick" opacity="1" transform="translate(240.5,0)">
39+
<line stroke="currentColor" y2="6" y1="-10"></line>
40+
<text fill="currentColor" y="9" dy="0.71em">0</text>
41+
</g>
42+
</g>
43+
</svg><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">
44+
<style>
45+
.plot {
46+
display: block;
47+
background: white;
48+
height: auto;
49+
height: intrinsic;
50+
max-width: 100%;
51+
}
52+
53+
.plot text,
54+
.plot tspan {
55+
white-space: pre;
56+
}
57+
</style>
58+
<g aria-label="x-axis tick" fill="none" stroke="currentColor" transform="translate(25,0)">
59+
<path transform="translate(26,30)" d="M0,0L0,6"></path>
60+
<path transform="translate(80,30)" d="M0,0L0,6"></path>
61+
<path transform="translate(134,30)" d="M0,0L0,6"></path>
62+
<path transform="translate(188,30)" d="M0,0L0,6"></path>
63+
<path transform="translate(242,30)" d="M0,0L0,6"></path>
64+
<path transform="translate(296,30)" d="M0,0L0,6"></path>
65+
<path transform="translate(350,30)" d="M0,0L0,6"></path>
66+
<path transform="translate(404,30)" d="M0,0L0,6"></path>
67+
<path transform="translate(458,30)" d="M0,0L0,6"></path>
68+
<path transform="translate(512,30)" d="M0,0L0,6"></path>
69+
<path transform="translate(566,30)" d="M0,0L0,6"></path>
70+
</g>
71+
<g aria-label="x-axis tick label" transform="translate(25,9.5)">
72+
<text y="0.71em" transform="translate(26,30)">0</text>
73+
<text y="0.71em" transform="translate(80,30)">1</text>
74+
<text y="0.71em" transform="translate(134,30)">2</text>
75+
<text y="0.71em" transform="translate(188,30)">3</text>
76+
<text y="0.71em" transform="translate(242,30)">4</text>
77+
<text y="0.71em" transform="translate(296,30)">5</text>
78+
<text y="0.71em" transform="translate(350,30)">6</text>
79+
<text y="0.71em" transform="translate(404,30)">7</text>
80+
<text y="0.71em" transform="translate(458,30)">8</text>
81+
<text y="0.71em" transform="translate(512,30)">9</text>
82+
<text y="0.71em" transform="translate(566,30)">10</text>
83+
</g>
84+
<g aria-label="cell">
85+
<rect x="26" width="49" y="0" height="30" fill="rgb(0, 0, 255)"></rect>
86+
<rect x="80" width="49" y="0" height="30" fill="rgb(26, 0, 230)"></rect>
87+
<rect x="134" width="49" y="0" height="30" fill="rgb(51, 0, 204)"></rect>
88+
<rect x="188" width="49" y="0" height="30" fill="rgb(77, 0, 179)"></rect>
89+
<rect x="242" width="49" y="0" height="30" fill="rgb(102, 0, 153)"></rect>
90+
<rect x="296" width="49" y="0" height="30" fill="rgb(128, 0, 128)"></rect>
91+
<rect x="350" width="49" y="0" height="30" fill="rgb(153, 0, 102)"></rect>
92+
<rect x="404" width="49" y="0" height="30" fill="rgb(179, 0, 77)"></rect>
93+
<rect x="458" width="49" y="0" height="30" fill="rgb(204, 0, 51)"></rect>
94+
<rect x="512" width="49" y="0" height="30" fill="rgb(230, 0, 26)"></rect>
95+
<rect x="566" width="49" y="0" height="30" fill="rgb(255, 0, 0)"></rect>
96+
</g>
97+
<text x="640" y="20" dy="-1em" text-anchor="end" font-family="initial">⚠️<title>1 warning. Please check the console.</title></text>
98+
</svg></figure>

0 commit comments

Comments
 (0)