Density-based Ticks

This example shows how you can set up tick marks to be a fixed density rather than a fixed number of tick marks. This is useful for implementing visualizations that can be resized by the user.

Derived from

<!DOCTYPE html>
<html>
  <head>
  <script src="https://d3js.org/d3.v4.min.js"></script>
    <meta charset="utf-8">
    <title>Density-based Ticks</title>

.label {
        font: 24pt sans-serif;
      }

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

</style>
  </head>
  <body>
    <script>

var outerWidth = 950;
      var outerHeight = 500;
      var margin = { left: 80, top: 50, right: 500, bottom: 250 };
      var xAxisLabelText = "Axis Label";
      var xAxisLabelOffset = 55;

var innerWidth  = outerWidth  - margin.left - margin.right;
      var innerHeight = outerHeight - margin.top  - margin.bottom;

var svg = d3.select("body").append("svg")
        .attr("width",  outerWidth)
        .attr("height", outerHeight);
      var g = svg.append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
      var xAxisG = g.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + innerHeight + ")");

var xAxisLabel = g.append("text")
        .style("text-anchor", "middle")
        .attr("y", xAxisLabelOffset + innerHeight)
        .attr("class", "label")
        .text(xAxisLabelText);

var xScale = d3.scaleLinear().domain([0, 1000]);
      var xAxis = d3.axisBottom().scale(xScale);

var xPixelsPerTick = 70;

function render(){

var time = Date.now() / 800;
        var varyingWidth = innerWidth + Math.sin(time) * 350;

xAxis.ticks(varyingWidth / xPixelsPerTick);
        xAxisLabel.attr("x", varyingWidth / 2);

xScale.range([0, varyingWidth]);
        xAxisG.call(xAxis);
        requestAnimationFrame(render);
      }
      render();

</script>
  </body>
</html>

https://d3js.org/d3.v4.min.js