From 8769f6d8672d8a82762b5c137a32f724ef9df8d7 Mon Sep 17 00:00:00 2001 From: Mike Bostock Date: Sun, 21 Feb 2021 10:53:18 -0800 Subject: [PATCH] axis.offset --- src/axis.js | 29 +++++++++++++++++------------ 1 file changed, 17 insertions(+), 12 deletions(-) diff --git a/src/axis.js b/src/axis.js index b0ecb0c..32edf9f 100644 --- a/src/axis.js +++ b/src/axis.js @@ -8,19 +8,19 @@ var top = 1, epsilon = 1e-6; function translateX(x) { - return "translate(" + (x + 0.5) + ",0)"; + return "translate(" + x + ",0)"; } function translateY(y) { - return "translate(0," + (y + 0.5) + ")"; + return "translate(0," + y + ")"; } function number(scale) { return d => +scale(d); } -function center(scale) { - var offset = Math.max(0, scale.bandwidth() - 1) / 2; // Adjust for 0.5px offset. +function center(scale, offset) { + offset = Math.max(0, scale.bandwidth() - offset * 2) / 2; if (scale.round()) offset = Math.round(offset); return function(d) { return +scale(d) + offset; @@ -38,6 +38,7 @@ function axis(orient, scale) { tickSizeInner = 6, tickSizeOuter = 6, tickPadding = 3, + offset = typeof window !== "undefined" && window.devicePixelRatio >= 2 ? 0 : 0.5, k = orient === top || orient === left ? -1 : 1, x = orient === left || orient === right ? "x" : "y", transform = orient === top || orient === bottom ? translateX : translateY; @@ -47,9 +48,9 @@ function axis(orient, scale) { format = tickFormat == null ? (scale.tickFormat ? scale.tickFormat.apply(scale, tickArguments) : identity) : tickFormat, spacing = Math.max(tickSizeInner, 0) + tickPadding, range = scale.range(), - range0 = +range[0] + 0.5, - range1 = +range[range.length - 1] + 0.5, - position = (scale.bandwidth ? center : number)(scale.copy()), + range0 = +range[0] + offset, + range1 = +range[range.length - 1] + offset, + position = (scale.bandwidth ? center : number)(scale.copy(), offset), selection = context.selection ? context.selection() : context, path = selection.selectAll(".domain").data([null]), tick = selection.selectAll(".tick").data(values, scale).order(), @@ -81,23 +82,23 @@ function axis(orient, scale) { tickExit = tickExit.transition(context) .attr("opacity", epsilon) - .attr("transform", function(d) { return isFinite(d = position(d)) ? transform(d) : this.getAttribute("transform"); }); + .attr("transform", function(d) { return isFinite(d = position(d)) ? transform(d + offset) : this.getAttribute("transform"); }); tickEnter .attr("opacity", epsilon) - .attr("transform", function(d) { var p = this.parentNode.__axis; return transform(p && isFinite(p = p(d)) ? p : position(d)); }); + .attr("transform", function(d) { var p = this.parentNode.__axis; return transform((p && isFinite(p = p(d)) ? p : position(d)) + offset); }); } tickExit.remove(); path .attr("d", orient === left || orient === right - ? (tickSizeOuter ? "M" + k * tickSizeOuter + "," + range0 + "H0.5V" + range1 + "H" + k * tickSizeOuter : "M0.5," + range0 + "V" + range1) - : (tickSizeOuter ? "M" + range0 + "," + k * tickSizeOuter + "V0.5H" + range1 + "V" + k * tickSizeOuter : "M" + range0 + ",0.5H" + range1)); + ? (tickSizeOuter ? "M" + k * tickSizeOuter + "," + range0 + "H" + offset + "V" + range1 + "H" + k * tickSizeOuter : "M" + offset + "," + range0 + "V" + range1) + : (tickSizeOuter ? "M" + range0 + "," + k * tickSizeOuter + "V" + offset + "H" + range1 + "V" + k * tickSizeOuter : "M" + range0 + "," + offset + "H" + range1)); tick .attr("opacity", 1) - .attr("transform", function(d) { return transform(position(d)); }); + .attr("transform", function(d) { return transform(position(d) + offset); }); line .attr(x + "2", k * tickSizeInner); @@ -152,6 +153,10 @@ function axis(orient, scale) { return arguments.length ? (tickPadding = +_, axis) : tickPadding; }; + axis.offset = function(_) { + return arguments.length ? (offset = +_, axis) : offset; + }; + return axis; }