Configuration

README.md

@@ -4,10 +4,10 @@ The axis component renders human-readable reference marks for [scales](https://g
 
 ## Installing
 
-If you use NPM, `npm install d3-axis`. Otherwise, download the [latest release](https://github.com/d3/d3-axis/releases/latest). You can also load directly from [d3js.org](https://d3js.org), either as a [standalone library](https://d3js.org/d3-axis.v1.min.js) or as part of [D3](https://github.com/d3/d3). (To be useful, you’ll also want to use [d3-scale](https://github.com/d3/d3-scale) and [d3-selection](https://github.com/d3/d3-selection), but these are soft dependencies.) AMD, CommonJS, and vanilla environments are supported. In vanilla, a `d3` global is exported:
+If you use NPM, `npm install d3-axis`. Otherwise, download the [latest release](https://github.com/d3/d3-axis/releases/latest). You can also load directly from [d3js.org](https://d3js.org), either as a [standalone library](https://d3js.org/d3-axis.v2.min.js) or as part of [D3](https://github.com/d3/d3). (To be useful, you’ll also want to use [d3-scale](https://github.com/d3/d3-scale) and [d3-selection](https://github.com/d3/d3-selection), but these are soft dependencies.) AMD, CommonJS, and vanilla environments are supported. In vanilla, a `d3` global is exported:
 
 ```html
-<script src="https://d3js.org/d3-axis.v1.min.js"></script>
+<script src="https://d3js.org/d3-axis.v2.min.js"></script>
 <script>
 
 var axis = d3.axisLeft(scale);
@@ -187,6 +187,19 @@ If *size* is specified, sets the inner tick size to the specified value and retu
 
 If *size* is specified, sets the outer tick size to the specified value and returns the axis. If *size* is not specified, returns the current outer tick size, which defaults to 6. The outer tick size controls the length of the square ends of the domain path, offset from the native position of the axis. Thus, the “outer ticks” are not actually ticks but part of the domain path, and their position is determined by the associated scale’s domain extent. Thus, outer ticks may overlap with the first or last inner tick. An outer tick size of 0 suppresses the square ends of the domain path, instead producing a straight line.
 
+<a name="axis_tickReach" href="#axis_tickReach">#</a> <i>axis</i>.<b>tickReach</b>([<i>reach</i>]) · [Source](https://github.com/d3/d3-axis/blob/master/src/axis.js)
+
+If *reach* is specified, sets the tick reach to the specified value and returns the axis. If *reach* is not specified, returns the current inner tick reach, which defaults to 0. The tick reach controls the length of the tick lines beyond the axis’ native position, and can be set to a chart’s width to create a grid.
+
 <a name="axis_tickPadding" href="#axis_tickPadding">#</a> <i>axis</i>.<b>tickPadding</b>([<i>padding</i>]) · [Source](https://github.com/d3/d3-axis/blob/master/src/axis.js)
 
-If *padding* is specified, sets the padding to the specified value in pixels and returns the axis. If *padding* is not specified, returns the current padding which defaults to 3 pixels.
+If *padding* is specified, sets the text padding to the specified value in pixels and returns the axis. If *padding* is not specified, returns the current padding which defaults to 3 pixels.
+
+<a name="axis_title" href="#axis_title">#</a> <i>axis</i>.<b>title</b>([<i>title</i>]) · [Source](https://github.com/d3/d3-axis/blob/master/src/axis.js)
+
+If a *title* is specified, sets the title and returns the axis. Otherwise returns the title. If the title is not `null`, a text element will be created near the far end of the axis, with a class `title` and a text content set to the title.
+
+<a name="axis_filter" href="#axis_filter">#</a> <i>axis</i>.<b>filter</b>([<i>filter</i>]) · [Source](https://github.com/d3/d3-axis/blob/master/src/axis.js)
+
+If a *filter* is specified, sets the filter and returns the axis. The filter is a function that returns a truthy value for all elements that must be displayed, with an argument of `domain`, `line` or `text`. Defaults to `function(type) { return true; }`.
+

package.json

@@ -35,7 +35,7 @@
   },
   "devDependencies": {
     "d3-scale": "2 - 3",
-    "d3-selection": "^1.1.0",
+    "d3-selection": "^1.1.0 - 2",
     "eslint": "6",
     "jsdom": "15",
     "rollup": "1",

src/axis.js

@@ -1,4 +1,5 @@
 import {slice} from "./array.js";
+import constant from "./constant.js";
 import identity from "./identity.js";
 
 var top = 1,
@@ -16,9 +17,7 @@ function translateY(y) {
 }
 
 function number(scale) {
-  return function(d) {
-    return +scale(d);
-  };
+  return d => +scale(d);
 }
 
 function center(scale) {
@@ -39,22 +38,30 @@ function axis(orient, scale) {
       tickFormat = null,
       tickSizeInner = 6,
       tickSizeOuter = 6,
+      tickReach = 0,
       tickPadding = 3,
+      title = null,
+      filter = constant(true),
       k = orient === top || orient === left ? -1 : 1,
       x = orient === left || orient === right ? "x" : "y",
+      y = orient === left || orient === right ? "y" : "x",
       transform = orient === top || orient === bottom ? translateX : translateY;
 
   function axis(context) {
     var values = tickValues == null ? (scale.ticks ? scale.ticks.apply(scale, tickArguments) : scale.domain()) : tickValues,
         format = tickFormat == null ? (scale.tickFormat ? scale.tickFormat.apply(scale, tickArguments) : identity) : tickFormat,
         spacing = Math.max(tickSizeInner, 0) + tickPadding,
+        filterDomain = filter("domain"),
+        filterLine = filter("line"),
+        filterText = filter("text"),
+        filterTick = filterLine || filterText,
         range = scale.range(),
         range0 = +range[0] + 0.5,
         range1 = +range[range.length - 1] + 0.5,
         position = (scale.bandwidth ? center : number)(scale.copy()),
         selection = context.selection ? context.selection() : context,
-        path = selection.selectAll(".domain").data([null]),
-        tick = selection.selectAll(".tick").data(values, scale).order(),
+        path = selection.selectAll(".domain").data(filterDomain ? [null] : []),
+        tick = selection.selectAll(".tick").data(filterTick ? values : [], scale).order(),
         tickExit = tick.exit(),
         tickEnter = tick.enter().append("g").attr("class", "tick"),
         line = tick.select("line"),
@@ -66,14 +73,23 @@ function axis(orient, scale) {
 
     tick = tick.merge(tickEnter);
 
-    line = line.merge(tickEnter.append("line")
-        .attr("stroke", "currentColor")
-        .attr(x + "2", k * tickSizeInner));
+    if (filterLine) {
+      line = line.merge(tickEnter.append("line")
+          .attr("stroke", "currentColor")
+          .attr(x + "1", tickReach ? -k * tickReach : null)
+          .attr(x + "2", k * tickSizeInner));
+    } else {
+      line.remove();
+    }
 
-    text = text.merge(tickEnter.append("text")
-        .attr("fill", "currentColor")
-        .attr(x, k * spacing)
-        .attr("dy", orient === top ? "0em" : orient === bottom ? "0.71em" : "0.32em"));
+    if (filterText) {
+      text = text.merge(tickEnter.append("text")
+          .attr("fill", "currentColor")
+          .attr(x, k * spacing)
+          .attr("dy", orient === top ? "0em" : orient === bottom ? "0.71em" : "0.32em"));
+    } else {
+      text.remove();
+    }
 
     if (context !== selection) {
       path = path.transition(context);
@@ -108,6 +124,20 @@ function axis(orient, scale) {
         .attr(x, k * spacing)
         .text(format);
 
+    selection.selectAll(".title")
+        .data(title === null ? [] : [title])
+        .join("text")
+        .classed("title", true)
+        .attr("text-anchor", orient === left ? "start" : "end")
+        .attr("font-size", 10)
+        .attr("font-family", "sans-serif")
+        .attr("fill", "currentColor")
+        .attr(y, range1)
+        .attr("alignment-baseline", "middle")
+        .attr("d" + x, x === "x" ? k * spacing : k * (spacing + tickPadding + 18))
+        .attr("d" + y, y === "y" ? -15 : 0)
+        .text(d => d);
+
     selection.filter(entering)
         .attr("fill", "none")
         .attr("font-size", 10)
@@ -150,10 +180,22 @@ function axis(orient, scale) {
     return arguments.length ? (tickSizeOuter = +_, axis) : tickSizeOuter;
   };
 
+  axis.tickReach = function(_) {
+    return arguments.length ? (tickReach = +_, axis) : tickReach;
+  };
+
   axis.tickPadding = function(_) {
     return arguments.length ? (tickPadding = +_, axis) : tickPadding;
   };
 
+  axis.title = function(_) {
+    return arguments.length ? (title = _, axis) : title;
+  };
+
+  axis.filter = function(_) {
+    return arguments.length ? (filter = _, axis) : filter;
+  };
+
   return axis;
 }
 

src/constant.js

@@ -0,0 +1 @@
+export default x => () => x;

yarn.lock

@@ -293,10 +293,10 @@ d3-interpolate@1:
     d3-time "1"
     d3-time-format "2"
 
-d3-selection@^1.1.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/d3-selection/-/d3-selection-1.4.0.tgz#ab9ac1e664cf967ebf1b479cc07e28ce9908c474"
-  integrity sha512-EYVwBxQGEjLCKF2pJ4+yrErskDnz5v403qvAid96cNdCMr8rmCYfY5RGzWz24mdIbxmDf6/4EAH+K9xperD5jg==
+"d3-selection@^1.1.0 - 2":
+  version "2.0.0-rc.2"
+  resolved "https://registry.yarnpkg.com/d3-selection/-/d3-selection-2.0.0-rc.2.tgz#530fffde9fc6007d90c79d39bc4b2777e7288f6e"
+  integrity sha512-3sXAgCMsIi6zmZFGwgI2fFi9f99vzBRUKZoKOJq8yWDDAci00QgJQfe7xW0VqUW2hItUvGVl61M8WY4Cxg8soQ==
 
 d3-time-format@2:
   version "2.1.3"