title: How to get axis ticks out of d3 without rendering in SVG?
body: <p>I'm implementing a 2d chart using canvas. I want to reuse d3's logic for generating the chart's axes. d3 does quite a lot of good work in generating axes and I'd like to take advantage of it.</p>
  
  <p>(Note: For backward-compatibility reasons I'm stuck using d3v3 for the time being.)</p>
  
  <p>Consider the following d3 code:</p>
  
  <pre><code>let scale = d3.time.scale()
      .range([0, width])
      .domain([lo, hi]);
  let axis = d3.svg.axis()
      .scale(scale)
      .ticks(num_ticks)
      .tickSize(10)
      .orient("bottom");
  </code></pre>
  
  <p>I can render this into a chart div with:</p>
  
  <pre><code>svg.selectAll('.x-axis').call(axis);
  </code></pre>
  
  <p>I want to be able to programmatically get the tick data out of <code>axis</code>, including the formatted labels, by writing a function that behaves as follows:</p>
  
  <pre><code>ticks = get_axis_ticks(axis)
  </code></pre>
  
  <p><code>ticks</code> should hold each tick position (as a <code>Date</code> in this particular case) and the corresponding d3-generated label.</p>
  
  <pre><code>[[Date(...), "Wed 19"],
   [Date(...), "Fri 21"],
   [Date(...), "Apr 23"],
   [Date(...), "Tue 25"],
   ...]
  </code></pre>
  
  <p>I could then use this data to paint an axis on my canvas.</p>
  
  <p>I've dug into d3v3 source (in particular here: <a href="https://github.com/d3/d3/blob/v3.5.17/src/svg/axis.js" rel="nofollow noreferrer">https://github.com/d3/d3/blob/v3.5.17/src/svg/axis.js</a>) but I find it very difficult to tease apart the logic from the SVG manipulation.</p>
  
  <p>Help would be much appreciated.</p>