Implement visual text label rendering for quiver using shared Drawing.textPointStyle utility

Author: degzhaus

src/traces/quiver/calc.js

@@ -121,6 +121,18 @@ module.exports = function calc(gd, trace) {
     trace._extremes[xa._id] = Axes.findExtremes(xa, allX, {padded: true});
     trace._extremes[ya._id] = Axes.findExtremes(ya, allY, {padded: true});
 
+    // Merge text arrays into calcdata for Drawing.textPointStyle
+    Lib.mergeArray(trace.text, cd, 'tx');
+    Lib.mergeArray(trace.textposition, cd, 'tp');
+    if(trace.textfont) {
+        Lib.mergeArrayCastPositive(trace.textfont.size, cd, 'ts');
+        Lib.mergeArray(trace.textfont.color, cd, 'tc');
+        Lib.mergeArray(trace.textfont.family, cd, 'tf');
+        Lib.mergeArray(trace.textfont.weight, cd, 'tw');
+        Lib.mergeArray(trace.textfont.style, cd, 'ty');
+        Lib.mergeArray(trace.textfont.variant, cd, 'tv');
+    }
+
     // Colorscale cmin/cmax computation: prefer provided marker.color, else magnitude
     if(trace._hasColorscale) {
         var vals = hasMarkerColorArray ? [cMin, cMax] : [normMin, normMax];

src/traces/quiver/plot.js

@@ -193,6 +193,36 @@ function plotOne(gd, idx, plotinfo, cdscatter, cdscatterAll, element, transition
         });
     }
 
+    // Render text labels at data points
+    var textGroup = d3.select(element).selectAll('g.text')
+        .data([cdscatter]);
+
+    textGroup.enter().append('g').classed('text', true);
+
+    Drawing.setClipUrl(textGroup, plotinfo.layerClipId, gd);
+
+    var textJoin = textGroup.selectAll('g.textpoint')
+        .data(cdscatter);
+
+    textJoin.enter().append('g').classed('textpoint', true).append('text');
+    textJoin.exit().remove();
+
+    textJoin.each(function(d) {
+        var g = d3.select(this);
+        var hasNode = Drawing.translatePoint(d, g.select('text'), xa, ya);
+        if(!hasNode) g.remove();
+    });
+
+    textJoin.selectAll('text')
+        .call(Drawing.textPointStyle, trace, gd)
+        .each(function(d) {
+            var x = xa.c2p(d.x);
+            var y = ya.c2p(d.y);
+            d3.select(this).selectAll('tspan.line').each(function() {
+                d3.select(this).attr({x: x, y: y});
+            });
+        });
+
     // Handle transitions
     if(transitionOpts && transitionOpts.duration > 0) {
         var transition = d3.transition()

test/image/mocks/quiver_simple.json

@@ -6,6 +6,9 @@
       "y": [0, 0, 0, 1, 1, 1, 2, 2, 2],
       "u": [1, 0, -1, 1, 0, -1, 1, 0, -1],
       "v": [0, 1, 0, 0, 1, 0, 0, 1, 0],
+      "text": ["A", "B", "C", "D", "E", "F", "G", "H", "I"],
+      "textposition": "top center",
+      "textfont": { "size": 12 },
       "sizemode": "scaled",
       "sizeref": 0.5,
       "anchor": "tail",