diff --git a/README.md b/README.md index 6c65e82..0542f32 100644 --- a/README.md +++ b/README.md @@ -208,3 +208,7 @@ If *padding* is specified, sets the padding to the specified value in pixels and # axis.offset([offset]) · [Source](https://github.com/d3/d3-axis/blob/master/src/axis.js) If *offset* is specified, sets the offset to the specified value in pixels and returns the axis. If *offset* is not specified, returns the current offset which defaults to 0 on devices with a [devicePixelRatio](https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio) greater than 1, and 0.5px otherwise. This default offset ensures crisp edges on low-resolution devices. + +# axis.line([line]) · [Source](https://github.com/d3/d3-axis/blob/master/src/axis.js) + +If *line* is specified, enables (if truthy) or suppresses (if falsy) the domain line (and outer ticks) and returns the axis. If *line* is not specified, returns the current line option which defaults to true. diff --git a/src/axis.js b/src/axis.js index 78e1bcb..09ced7b 100644 --- a/src/axis.js +++ b/src/axis.js @@ -38,7 +38,8 @@ function axis(orient, scale) { offset = typeof window !== "undefined" && window.devicePixelRatio > 1 ? 0 : 0.5, k = orient === top || orient === left ? -1 : 1, x = orient === left || orient === right ? "x" : "y", - transform = orient === top || orient === bottom ? translateX : translateY; + transform = orient === top || orient === bottom ? translateX : translateY, + domainLine = true; function axis(context) { var values = tickValues == null ? (scale.ticks ? scale.ticks.apply(scale, tickArguments) : scale.domain()) : tickValues, @@ -49,7 +50,8 @@ function axis(orient, scale) { 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]), + path = selection.selectAll(".domain").data(domainLine ? [null] : []), + pathExit = path.exit(), tick = selection.selectAll(".tick").data(values, scale).order(), tickExit = tick.exit(), tickEnter = tick.enter().append("g").attr("class", "tick"), @@ -81,6 +83,10 @@ function axis(orient, scale) { .attr("opacity", epsilon) .attr("transform", function(d) { return isFinite(d = position(d)) ? transform(d + offset) : this.getAttribute("transform"); }); + path.attr("stroke-opacity", 1); + pathExit = pathExit.transition(context) + .attr("stroke-opacity", epsilon); + tickEnter .attr("opacity", epsilon) .attr("transform", function(d) { var p = this.parentNode.__axis; return transform((p && isFinite(p = p(d)) ? p : position(d)) + offset); }); @@ -88,6 +94,8 @@ function axis(orient, scale) { tickExit.remove(); + pathExit.remove(); + path .attr("d", orient === left || orient === right ? (tickSizeOuter ? "M" + k * tickSizeOuter + "," + range0 + "H" + offset + "V" + range1 + "H" + k * tickSizeOuter : "M" + offset + "," + range0 + "V" + range1) @@ -154,6 +162,10 @@ function axis(orient, scale) { return arguments.length ? (offset = +_, axis) : offset; }; + axis.line = function(_) { + return arguments.length ? (domainLine = !!_, axis) : domainLine; + }; + return axis; } diff --git a/test/snapshots.js b/test/snapshots.js index 7141a9a..c375ba3 100644 --- a/test/snapshots.js +++ b/test/snapshots.js @@ -1,6 +1,6 @@ import {scaleLinear} from "d3-scale"; import {create} from "d3-selection"; -import {axisLeft} from "../src/index.js"; +import {axisBottom, axisLeft} from "../src/index.js"; export function axisLeftScaleLinear() { const svg = create("svg"); @@ -13,3 +13,10 @@ export function axisLeftScaleLinearNonNumericRange() { svg.append("g").call(axisLeft(scaleLinear().range([0, "500"]))); return svg.node(); } + +export function axisBottomScaleLinearNoLine() { + const axis = axisBottom(scaleLinear([0, 10], [10, 290])).line(false); + const svg = create("svg"); + svg.append("g").call(axis); + return svg.node(); +} diff --git a/test/snapshots/axisBottomScaleLinear.html b/test/snapshots/axisBottomScaleLinear.html new file mode 100644 index 0000000..220dbc4 --- /dev/null +++ b/test/snapshots/axisBottomScaleLinear.html @@ -0,0 +1,38 @@ + + + + + 0 + + + 1 + + + 2 + + + 3 + + + 4 + + + 5 + + + 6 + + + 7 + + + 8 + + + 9 + + + 10 + + + \ No newline at end of file diff --git a/test/snapshots/axisBottomScaleLinearNoLine.html b/test/snapshots/axisBottomScaleLinearNoLine.html new file mode 100644 index 0000000..220dbc4 --- /dev/null +++ b/test/snapshots/axisBottomScaleLinearNoLine.html @@ -0,0 +1,38 @@ + + + + + 0 + + + 1 + + + 2 + + + 3 + + + 4 + + + 5 + + + 6 + + + 7 + + + 8 + + + 9 + + + 10 + + + \ No newline at end of file