Skip to content

Commit 54afea0

Browse files
mbostockmbostock
committed
handle collapsed domains
1 parent b1885ad commit 54afea0

File tree

9 files changed

+120
-32
lines changed

9 files changed

+120
-32
lines changed

‎src/mark.js

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -326,3 +326,18 @@ export function isTemporal(values) {
326326
return value instanceof Date;
327327
}
328328
}
329+
330+
// Certain marks have special behavior if a scale is collapsed, i.e. if the
331+
// domain is degenerate and represents only a single value such as [3, 3]; for
332+
// example, a rect will span the full extent of the chart along a collapsed
333+
// dimension (whereas a dot will simply be drawn in the center).
334+
export function isCollapsed(scale) {
335+
const domain = scale.domain();
336+
const value = scale(domain[0]);
337+
for (let i = 1, n = domain.length; i < n; ++i) {
338+
if (scale(domain[i]) - value) {
339+
return false;
340+
}
341+
}
342+
return true;
343+
}

‎src/marks/bar.js

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import {create} from "d3";
22
import {filter} from "../defined.js";
3-
import {Mark, number} from "../mark.js";
3+
import {Mark, number, isCollapsed} from "../mark.js";
44
import {applyDirectStyles, applyIndirectStyles, applyTransform, impliedString, applyAttr, applyChannelStyles} from "../style.js";
55
import {maybeStackX, maybeStackY} from "../transforms/stack.js";
66

@@ -75,13 +75,13 @@ export class BarX extends AbstractBar {
7575
_positions({x1: X1, x2: X2, y: Y}) {
7676
return [X1, X2, Y];
7777
}
78-
_x(scales, {x1: X1, x2: X2}) {
78+
_x({x}, {x1: X1, x2: X2}, {marginLeft}) {
7979
const {insetLeft} = this;
80-
return i => Math.min(X1[i], X2[i]) + insetLeft;
80+
return isCollapsed(x) ? marginLeft + insetLeft : i => Math.min(X1[i], X2[i]) + insetLeft;
8181
}
82-
_width(scales, {x1: X1, x2: X2}) {
82+
_width({x}, {x1: X1, x2: X2}, {marginRight, marginLeft, width}) {
8383
const {insetLeft, insetRight} = this;
84-
return i => Math.max(0, Math.abs(X2[i] - X1[i]) - insetLeft - insetRight);
84+
return isCollapsed(x) ? width - marginRight - marginLeft - insetLeft - insetRight : i => Math.max(0, Math.abs(X2[i] - X1[i]) - insetLeft - insetRight);
8585
}
8686
}
8787

@@ -104,13 +104,13 @@ export class BarY extends AbstractBar {
104104
_positions({y1: Y1, y2: Y2, x: X}) {
105105
return [Y1, Y2, X];
106106
}
107-
_y(scales, {y1: Y1, y2: Y2}) {
107+
_y({y}, {y1: Y1, y2: Y2}, {marginTop}) {
108108
const {insetTop} = this;
109-
return i => Math.min(Y1[i], Y2[i]) + insetTop;
109+
return isCollapsed(y) ? marginTop + insetTop : i => Math.min(Y1[i], Y2[i]) + insetTop;
110110
}
111-
_height(scales, {y1: Y1, y2: Y2}) {
111+
_height({y}, {y1: Y1, y2: Y2}, {marginTop, marginBottom, height}) {
112112
const {insetTop, insetBottom} = this;
113-
return i => Math.max(0, Math.abs(Y2[i] - Y1[i]) - insetTop - insetBottom);
113+
return isCollapsed(y) ? height - marginTop - marginBottom - insetTop - insetBottom : i => Math.max(0, Math.abs(Y2[i] - Y1[i]) - insetTop - insetBottom);
114114
}
115115
}
116116

‎src/marks/rect.js

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import {create} from "d3";
22
import {filter} from "../defined.js";
3-
import {Mark, number} from "../mark.js";
3+
import {Mark, number, isCollapsed} from "../mark.js";
44
import {applyDirectStyles, applyIndirectStyles, applyTransform, impliedString, applyAttr, applyChannelStyles} from "../style.js";
55
import {maybeStackX, maybeStackY} from "../transforms/stack.js";
66

@@ -39,8 +39,9 @@ export class Rect extends Mark {
3939
this.rx = impliedString(rx, "auto"); // number or percentage
4040
this.ry = impliedString(ry, "auto");
4141
}
42-
render(I, {x, y}, channels) {
42+
render(I, {x, y}, channels, dimensions) {
4343
const {x1: X1, y1: Y1, x2: X2, y2: Y2} = channels;
44+
const {marginTop, marginRight, marginBottom, marginLeft, width, height} = dimensions;
4445
const {rx, ry} = this;
4546
const index = filter(I, X1, Y2, X2, Y2);
4647
return create("svg:g")
@@ -50,10 +51,10 @@ export class Rect extends Mark {
5051
.data(index)
5152
.join("rect")
5253
.call(applyDirectStyles, this)
53-
.attr("x", i => Math.min(X1[i], X2[i]) + this.insetLeft)
54-
.attr("y", i => Math.min(Y1[i], Y2[i]) + this.insetTop)
55-
.attr("width", i => Math.max(0, Math.abs(X2[i] - X1[i]) - this.insetLeft - this.insetRight))
56-
.attr("height", i => Math.max(0, Math.abs(Y1[i] - Y2[i]) - this.insetTop - this.insetBottom))
54+
.attr("x", isCollapsed(x) ? marginLeft + this.insetLeft : i => Math.min(X1[i], X2[i]) + this.insetLeft)
55+
.attr("y", isCollapsed(y) ? marginTop + this.insetTop : i => Math.min(Y1[i], Y2[i]) + this.insetTop)
56+
.attr("width", isCollapsed(x) ? width - marginLeft - marginRight - this.insetLeft - this.insetRight : i => Math.max(0, Math.abs(X2[i] - X1[i]) - this.insetLeft - this.insetRight))
57+
.attr("height", isCollapsed(y) ? height - marginTop - marginBottom - this.insetTop - this.insetBottom : i => Math.max(0, Math.abs(Y1[i] - Y2[i]) - this.insetTop - this.insetBottom))
5758
.call(applyAttr, "rx", rx)
5859
.call(applyAttr, "ry", ry)
5960
.call(applyChannelStyles, channels))

‎src/marks/rule.js

Lines changed: 9 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import {create} from "d3";
22
import {filter} from "../defined.js";
3-
import {Mark, identity, number} from "../mark.js";
3+
import {Mark, identity, number, isCollapsed} from "../mark.js";
44
import {applyDirectStyles, applyIndirectStyles, applyTransform, applyChannelStyles} from "../style.js";
55

66
const defaults = {
@@ -31,13 +31,9 @@ export class RuleX extends Mark {
3131
this.insetTop = number(insetTop);
3232
this.insetBottom = number(insetBottom);
3333
}
34-
render(
35-
I,
36-
{x, y},
37-
channels,
38-
{width, height, marginTop, marginRight, marginLeft, marginBottom}
39-
) {
34+
render(I, {x, y}, channels, dimensions) {
4035
const {x: X, y1: Y1, y2: Y2} = channels;
36+
const {width, height, marginTop, marginRight, marginLeft, marginBottom} = dimensions;
4137
const index = filter(I, X, Y1, Y2);
4238
return create("svg:g")
4339
.call(applyIndirectStyles, this)
@@ -48,8 +44,8 @@ export class RuleX extends Mark {
4844
.call(applyDirectStyles, this)
4945
.attr("x1", X ? i => X[i] : (marginLeft + width - marginRight) / 2)
5046
.attr("x2", X ? i => X[i] : (marginLeft + width - marginRight) / 2)
51-
.attr("y1", Y1 ? i => Y1[i] + this.insetTop : marginTop + this.insetTop)
52-
.attr("y2", Y2 ? (y.bandwidth ? i => Y2[i] + y.bandwidth() - this.insetBottom : i => Y2[i] - this.insetBottom) : height - marginBottom - this.insetBottom)
47+
.attr("y1", Y1 && !isCollapsed(y) ? i => Y1[i] + this.insetTop : marginTop + this.insetTop)
48+
.attr("y2", Y2 && !isCollapsed(y) ? (y.bandwidth ? i => Y2[i] + y.bandwidth() - this.insetBottom : i => Y2[i] - this.insetBottom) : height - marginBottom - this.insetBottom)
5349
.call(applyChannelStyles, channels))
5450
.node();
5551
}
@@ -78,13 +74,9 @@ export class RuleY extends Mark {
7874
this.insetRight = number(insetRight);
7975
this.insetLeft = number(insetLeft);
8076
}
81-
render(
82-
I,
83-
{x, y},
84-
channels,
85-
{width, height, marginTop, marginRight, marginLeft, marginBottom}
86-
) {
77+
render(I, {x, y}, channels, dimensions) {
8778
const {y: Y, x1: X1, x2: X2} = channels;
79+
const {width, height, marginTop, marginRight, marginLeft, marginBottom} = dimensions;
8880
const index = filter(I, Y, X1, X2);
8981
return create("svg:g")
9082
.call(applyIndirectStyles, this)
@@ -93,8 +85,8 @@ export class RuleY extends Mark {
9385
.data(index)
9486
.join("line")
9587
.call(applyDirectStyles, this)
96-
.attr("x1", X1 ? i => X1[i] + this.insetLeft : marginLeft + this.insetLeft)
97-
.attr("x2", X2 ? (x.bandwidth ? i => X2[i] + x.bandwidth() - this.insetRight : i => X2[i] - this.insetRight) : width - marginRight - this.insetRight)
88+
.attr("x1", X1 && !isCollapsed(x) ? i => X1[i] + this.insetLeft : marginLeft + this.insetLeft)
89+
.attr("x2", X2 && !isCollapsed(x) ? (x.bandwidth ? i => X2[i] + x.bandwidth() - this.insetRight : i => X2[i] - this.insetRight) : width - marginRight - this.insetRight)
9890
.attr("y1", Y ? i => Y[i] : (marginTop + height - marginBottom) / 2)
9991
.attr("y2", Y ? i => Y[i] : (marginTop + height - marginBottom) / 2)
10092
.call(applyChannelStyles, channels))

‎test/output/singleValueBar.svg

Lines changed: 18 additions & 0 deletions
Loading

‎test/output/singleValueBin.svg

Lines changed: 45 additions & 0 deletions
Loading

‎test/plots/index.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,8 @@ export {default as sfTemperatureBandArea} from "./sf-temperature-band-area.js";
8888
export {default as simpsonsRatings} from "./simpsons-ratings.js";
8989
export {default as simpsonsRatingsDots} from "./simpsons-ratings-dots.js";
9090
export {default as simpsonsViews} from "./simpsons-views.js";
91+
export {default as singleValueBar} from "./single-value-bar.js";
92+
export {default as singleValueBin} from "./single-value-bin.js";
9193
export {default as softwareVersions} from "./software-versions.js";
9294
export {default as stackedBar} from "./stacked-bar.js";
9395
export {default as stocksIndex} from "./stocks-index.js";

‎test/plots/single-value-bar.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import * as Plot from "@observablehq/plot";
2+
3+
export default async function() {
4+
return Plot.plot({
5+
marks: [
6+
Plot.barY({length: 1}, {x: ["foo"], y1: [0], y2: [0]}),
7+
Plot.ruleX(["foo"], {stroke: "red", y1: [0], y2: [0]})
8+
]
9+
});
10+
}

‎test/plots/single-value-bin.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import * as Plot from "@observablehq/plot";
2+
3+
export default async function() {
4+
return Plot.rectY([3], Plot.binX()).plot();
5+
}

0 commit comments

Comments
 (0)