Suggestion: Add axisTop example

[GCHQDeveloper500]

A recent version of chrome appears to have delivered a change to their default user agent specification that implements the following rule;

https://www.w3.org/TR/SVG/styling.html#UAStyleSheet

Specifically the following appears to be new (not sure exactly when but last couple of chrome versions at least);

svg:not(:root), image, marker, pattern, symbol { overflow: hidden; }

Specifically the part that is interesting to this library is that svgs that are not at the root will now have their overflow hidden by default.

What this means is that the axisTop function will now no longer display unless you override that style because it works by using negative values for y which takes causes it to overflow (and therefore not display because of this new rule).

The following hopefully illustrates this better;

var scale = d3.scaleLinear().domain([0, 100]).range([0, 400]);

var axis = d3.axisBottom(scale);

d3.select("#axis-demo")
  .append("svg")
    .style('overflow', 'inherit') // previously you didn't need to do this, but now you do
    .attr("width", 400)
    .attr("height", 30)
  .append("g")
    .attr("transform", "translate(0,30)")
    .call(axis);

I don't think this is necessarily something to "fix" but I was wondering if you thought it was worth putting a quick note in the docs about this to save anyone else running into this? Happy to provide the PR if you agree.

[mbostock]

I don’t generally recommend using overflow: visible to draw the axis outside the normal bounds of the SVG element. Instead, I recommend using a transform to translate the axis into the desired position, as is shown in most of the example charts.

https://observablehq.com/collection/@d3/d3-shape

We’re working on more dedicated d3-axis examples on Observable.