Add support for rendering minor gridlines/ticks

The js-side of mpld3/mplexporter#73 and fixes mpld3#527
Also adds some tests for minor-grid.

It seems that the uglify is getting tripped up by `??`, so we should
consider upgrading it, because a little chunk of this code could be
quite a bit less verbose with that.

Anyways, as usual disclaimer about having co-developed this with
gpt-5.1-codex, but also tested and carefully reviewed/cleaned it.

Here's what it has to say:

- carry filtered minor tick values/length into axis props and draw a separate minor grid/tick layer
- streamline axis getGrid tick selection and style passthrough to grids

Author: lucasb-eyer

mpld3/tests/test_elements.py

@@ -191,3 +191,26 @@ def test_ticks():
     rep = fig_to_html(plt.gcf())
     # TODO: use casperjs here if available to confirm that the xticks
     # are rendeder as expected
+
+
+def test_minor_grid_export():
+    fig, ax = plt.subplots()
+    ax.set_ylim(0, 3)
+    ax.minorticks_on()
+    ax.grid(which='minor', axis='y', c='blue', ls='--', lw=2)
+    rep = fig_to_dict(fig)
+    y_axis = rep['axes'][0]['axes'][1]
+    assert y_axis['minor_grid']['gridOn'] is True
+    assert y_axis['minor_grid']['color'] == '#0000FF'
+    assert y_axis['minor_grid']['dasharray'] == '6,6'
+    assert y_axis['minor_grid']['linewidth'] == 2
+    assert len(y_axis['minor_tickvalues']) > 0
+
+
+def test_minor_tick_locations():
+    fig, ax = plt.subplots()
+    ax.minorticks_on()
+    ax.yaxis.set_minor_locator(plt.FixedLocator([0.5, 1.5, 2.5]))
+    rep = fig_to_dict(fig)
+    y_axis = rep['axes'][0]['axes'][1]
+    assert y_axis['minor_tickvalues'] == [0.5, 1.5, 2.5]

src/core/axes.js

@@ -127,6 +127,9 @@ function mpld3_Axes(fig, props) {
         if (this.props.gridOn || axis.props.grid.gridOn) {
             this.elements.push(axis.getGrid());
         }
+        if (axis.props.minor_grid && axis.props.minor_grid.gridOn) {
+            this.elements.push(axis.getGrid('minor'));
+        }
     }
 
     // Add paths

src/core/axis.js

@@ -42,15 +42,19 @@ mpld3_Axis.prototype.requiredProps = ["position"];
 mpld3_Axis.prototype.defaultProps = {
     nticks: 10,
     tickvalues: null,
+    minor_tickvalues: null,
     tickformat: null,
     filtered_tickvalues: null,
     filtered_tickformat: null,
+    filtered_minortickvalues: null,
     tickformat_formatter: null,
     fontsize: "11px",
     fontcolor: "black",
     axiscolor: "black",
     scale: "linear",
     grid: {},
+    minor_grid: {},
+    minorticklength: null,
     zorder: 0,
     visible: true
 };
@@ -81,17 +85,26 @@ function mpld3_Axis(ax, props) {
     this.tickFormat = null;
 }
 
-mpld3_Axis.prototype.getGrid = function() {
+mpld3_Axis.prototype.getGrid = function(which) {
+    which = which || 'major';
     this.filter_ticks(this.scale.domain());
+    var isMinor = which === 'minor';
     var gridprop = {
         nticks: this.props.nticks,
         zorder: this.props.zorder,
-        tickvalues: this.props.filtered_tickvalues ?? this.props.tickvalues,
+        tickvalues: null,
         xy: this.props.xy
     }
-    if (this.props.grid) {
-        for (var key in this.props.grid) {
-            gridprop[key] = this.props.grid[key];
+    var gridstyle = isMinor ? this.props.minor_grid : this.props.grid;
+    // NOTE: This could be simplified with ?? but our current uglify doesn't support it?
+    var ticks = isMinor ? this.props.filtered_minortickvalues : this.props.filtered_tickvalues;
+    if (ticks === null || ticks === undefined) {
+        ticks = isMinor ? this.props.minor_tickvalues : this.props.tickvalues;
+    }
+    gridprop.tickvalues = ticks;
+    if (gridstyle) {
+        for (var key in gridstyle) {
+            gridprop[key] = gridprop[key] || gridstyle[key];
         }
     }
     return new mpld3_Grid(this.ax, gridprop);
@@ -227,6 +240,20 @@ mpld3_Axis.prototype.draw = function() {
 
     this.wrapTicks();
 
+    if (this.props.filtered_minortickvalues && this.props.filtered_minortickvalues.length > 0) {
+        this.minorAxis = d3[scaleMethod](this.scale)
+            .tickValues(this.props.filtered_minortickvalues)
+            .tickSize(this.props.minorticklength || 4, 0, 0)
+            .tickFormat("");
+        this.minorElem = this.ax.baseaxes.append('g')
+            .attr("transform", this.transform)
+            .attr("class", this.cssclass + " minor")
+            .call(this.minorAxis);
+    } else {
+        this.minorAxis = null;
+        this.minorElem = null;
+    }
+
     // We create header-level CSS to style these elements, because
     // zooming/panning creates new elements with these classes.
     mpld3.insert_css("div#" + this.ax.fig.figid + " ." + this.cssclass + " line, " + " ." + this.cssclass + " path", {
@@ -257,6 +284,19 @@ mpld3_Axis.prototype.zoomed = function(transform) {
     } else {
         this.elem.call(this.axis);
     }
+
+    if (this.minorAxis) {
+        this.minorAxis = this.minorAxis.tickValues(this.props.filtered_minortickvalues || []);
+        if (transform) {
+            if (this.props.xy == 'x') {
+                this.minorElem.call(this.minorAxis.scale(transform.rescaleX(this.scale)));
+            } else {
+                this.minorElem.call(this.minorAxis.scale(transform.rescaleY(this.scale)));
+            }
+        } else {
+            this.minorElem.call(this.minorAxis);
+        }
+    }
 };
 
 mpld3_Axis.prototype.setTicks = function(nr, format) {
@@ -288,4 +328,19 @@ mpld3_Axis.prototype.filter_ticks = function(domain) {
         this.props.filtered_tickvalues = this.props.tickvalues;
         this.props.filtered_tickformat = this.props.tickformat;
     }
+
+    if (this.props.minor_tickvalues) {
+        const that = this;
+        const minorFilteredTickIndices = this.props.minor_tickvalues.map(function(d, i) {
+            return i;
+        }).filter(function(d, i) {
+            const v = that.props.minor_tickvalues[d];
+            return (v >= domain[0]) && (v <= domain[1]);
+        });
+        this.props.filtered_minortickvalues = this.props.minor_tickvalues.filter(function(d, i) {
+            return minorFilteredTickIndices.includes(i);
+        });
+    } else {
+        this.props.filtered_minortickvalues = this.props.minor_tickvalues;
+    }
 }