gantt/ganttRenderer: add top x-axis for large Gantt charts

I am leveraging a Gantt chart to generate a years-long Roadmap from text.
This is for a large team, so it is quite large. A request I get from my
stakeholders is for a top labelling axis in parallel to the current bottom
one, so that the dates are labelled no matter where we are scrolled on
the screen.

src/diagrams/gantt/ganttRenderer.js

@@ -6,6 +6,7 @@ import {
   scaleLinear,
   interpolateHcl,
   axisBottom,
+  axisTop,
   timeFormat
 } from 'd3';
 import { parser } from './parser/gantt';
@@ -369,6 +370,22 @@ export const draw = function(text, id) {
       .attr('stroke', 'none')
       .attr('font-size', 10)
       .attr('dy', '1em');
+
+    let topXAxis = axisTop(timeScale)
+      .tickSize(-h + theTopPad + conf.gridLineStartPadding)
+      .tickFormat(timeFormat(parser.yy.getAxisFormat() || conf.axisFormat || '%Y-%m-%d'));
+
+    svg
+      .append('g')
+      .attr('class', 'grid')
+      .attr('transform', 'translate(' + theSidePad + ', ' + (h - 50) + ')')
+      .call(topXAxis)
+      .selectAll('text')
+      .style('text-anchor', 'middle')
+      .attr('fill', '#000')
+      .attr('stroke', 'none')
+      .attr('font-size', 10)
+      .attr('dy', '1em');
   }
 
   function vertLabels(theGap, theTopPad) {