• Mark the package as having no side effects. Thanks, @stof! #61
• Standardize dependencies. d3/d3#3337
• Use explicit files when publishing. d3/d3#3335
• Use exact paths in imports. d3/d3#3265

This release adopts ES2015 language features such as for-of and drops support for older browsers, including IE. If you need to support pre-ES2015 environments, you should stick with d3-axis 1.x or use a transpiler.

• Update dependencies.

• Update dependencies.

• Fix for outer tick size of zero. (#32)

• Use currentColor instead of black.

• Fix rendering when a scale has a non-numeric range. (d3/d3-scale#107)

• Fix tick offset for band and point scales. (#37)
• Optimize generated DOM slightly.

v1.0.6

Compare

Choose a tag to compare

• Fix invalid transforms when an ordinal axis transition is interrupted. (#24)

• Add module entry point to package.json.

• Fix crisp edges for band scales with odd bandwidths.

• First stable release.

Changes since D3 3.x

To render axes properly in D3 3.x, you needed to style them:

<style>

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.axis text {
  font: 10px sans-serif;
}

</style>
<script>

d3.select(".axis")
    .call(d3.svg.axis()
        .scale(x)
        .orient("bottom"));

</script>

If you didn’t, you saw this:

<img src="https://raw.githubusercontent.com/d3/d3/master/img/axis-v3.png" width="100%" height="105">

D3 4.0 provides default styles and shorter syntax. In place of d3.svg.axis and axis.orient, D3 4.0 now provides four constructors for each orientation: d3.axisTop, d3.axisRight, d3.axisBottom, d3.axisLeft. These constructors accept a scale, so you can reduce all of the above to:

<script>

d3.select(".axis")
    .call(d3.axisBottom(x));

</script>

And get this:

<img src="https://raw.githubusercontent.com/d3/d3/master/img/axis-v4.png" width="100%" height="105">

As before, you can customize the axis appearance either by applying stylesheets or by modifying the axis elements. The default appearance has been changed slightly to offset the axis by a half-pixel; this fixes a crisp-edges rendering issue on Safari where the axis would be drawn two-pixels thick.

There’s now an axis.tickArguments method, as an alternative to axis.ticks that also allows the axis tick arguments to be inspected. The axis.tickSize method has been changed to only allow a single argument when setting the tick size; use axis.tickSizeInner or axis.tickSizeOuter to set the inner and outer tick size separately.

See CHANGES for all D3 changes since 3.x.

• Draw the ticks over the domain path, rather than vice versa.

• Export to the global d3 in vanilla environments (d3/d3#2840).

• Improve the default appearance.
• Use presentation attributes instead of styles to define default appearance.

• Upgrade to d3-scale 0.7 (#6).

• Update d3-selection dependency.
• Cleaner implementation of orientation.

• More concise axis construction.

• Remove axis.orient.
• Add axisTop, axisRight, axisBottom, axisBottom.