sankey: compare links in a flow on hover

src/components/fx/hover.js

@@ -230,7 +230,7 @@ exports.multiHovers = function multiHovers(hoverItems, opts) {
 
     alignHoverText(hoverLabel, fullOpts.rotateLabels);
 
-    return hoverLabel.node();
+    return hoverLabel;
 };
 
 // The actual implementation is here:

src/components/modebar/manage.js

@@ -86,6 +86,7 @@ function getButtonGroups(gd, buttonsToRemove, buttonsToAdd, showSendToCloud) {
     var hasTernary = fullLayout._has('ternary');
     var hasMapbox = fullLayout._has('mapbox');
     var hasPolar = fullLayout._has('polar');
+    var hasSankey = fullLayout._has('sankey');
     var allAxesFixed = areAllAxesFixed(fullLayout);
 
     var groups = [];
@@ -139,6 +140,9 @@ function getButtonGroups(gd, buttonsToRemove, buttonsToAdd, showSendToCloud) {
     else if(hasPie) {
         hoverGroup = ['hoverClosestPie'];
     }
+    else if(hasSankey) {
+        hoverGroup = ['hoverClosestCartesian', 'hoverCompareCartesian'];
+    }
     else { // hasPolar, hasTernary
         // always show at least one hover icon.
         hoverGroup = ['toggleHover'];

src/traces/sankey/plot.js

@@ -156,51 +156,63 @@ module.exports = function plot(gd, calcData) {
         if(gd._fullLayout.hovermode === false) return;
         var obj = d.link.trace.link;
         if(obj.hoverinfo === 'none' || obj.hoverinfo === 'skip') return;
-        var rootBBox = gd._fullLayout._paperdiv.node().getBoundingClientRect();
-        var hoverCenterX;
-        var hoverCenterY;
-        if(d.link.circular) {
-            hoverCenterX = (d.link.circularPathData.leftInnerExtent + d.link.circularPathData.rightInnerExtent) / 2 + d.parent.translateX;
-            hoverCenterY = d.link.circularPathData.verticalFullExtent + d.parent.translateY;
-        } else {
-            var boundingBox = element.getBoundingClientRect();
-            hoverCenterX = boundingBox.left + boundingBox.width / 2 - rootBBox.left;
-            hoverCenterY = boundingBox.top + boundingBox.height / 2 - rootBBox.top;
-        }
 
-        var hovertemplateLabels = {valueLabel: d3.format(d.valueFormat)(d.link.value) + d.valueSuffix};
-        d.link.fullData = d.link.trace;
+        var hoverItems = [];
+
+        // For each related links, create a hoverItem
+        for(var i = 0; i < d.flow.links.length; i++) {
+            var link = d.flow.links[i];
+            if(gd._fullLayout.hovermode === 'closest' && d.link.pointNumber !== link.pointNumber) continue;
+            link.fullData = link.trace;
+            obj = d.link.trace.link;
+            var hoverCenterX;
+            var hoverCenterY;
+            if(link.circular) {
+                hoverCenterX = (link.circularPathData.leftInnerExtent + link.circularPathData.rightInnerExtent) / 2 + d.parent.translateX;
+                hoverCenterY = link.circularPathData.verticalFullExtent + d.parent.translateY;
+            } else {
+                hoverCenterX = (link.source.x1 + link.target.x0) / 2 + d.parent.translateX;
+                hoverCenterY = (link.y0 + link.y1) / 2 + d.parent.translateY;
+            }
 
-        var tooltip = Fx.loneHover({
-            x: hoverCenterX,
-            y: hoverCenterY,
-            name: hovertemplateLabels.valueLabel,
-            text: [
-                d.link.label || '',
-                sourceLabel + d.link.source.label,
-                targetLabel + d.link.target.label,
-                d.link.concentrationscale ? concentrationLabel + d3.format('%0.2f')(d.link.flow.labelConcentration) : ''
-            ].filter(renderableValuePresent).join('<br>'),
-            color: castHoverOption(obj, 'bgcolor') || Color.addOpacity(d.tinyColorHue, 1),
-            borderColor: castHoverOption(obj, 'bordercolor'),
-            fontFamily: castHoverOption(obj, 'font.family'),
-            fontSize: castHoverOption(obj, 'font.size'),
-            fontColor: castHoverOption(obj, 'font.color'),
-            idealAlign: d3.event.x < hoverCenterX ? 'right' : 'left',
+            var hovertemplateLabels = {valueLabel: d3.format(d.valueFormat)(link.value) + d.valueSuffix};
+
+            hoverItems.push({
+                x: hoverCenterX,
+                y: hoverCenterY,
+                name: hovertemplateLabels.valueLabel,
+                text: [
+                    link.label || '',
+                    sourceLabel + link.source.label,
+                    targetLabel + link.target.label,
+                    link.concentrationscale ? concentrationLabel + d3.format('%0.2f')(link.flow.labelConcentration) : ''
+                ].filter(renderableValuePresent).join('<br>'),
+                color: castHoverOption(obj, 'bgcolor') || Color.addOpacity(link.color, 1),
+                borderColor: castHoverOption(obj, 'bordercolor'),
+                fontFamily: castHoverOption(obj, 'font.family'),
+                fontSize: castHoverOption(obj, 'font.size'),
+                fontColor: castHoverOption(obj, 'font.color'),
+                idealAlign: d3.event.x < hoverCenterX ? 'right' : 'left',
+
+                hovertemplate: obj.hovertemplate,
+                hovertemplateLabels: hovertemplateLabels,
+                eventData: [link]
+            });
+        }
 
-            hovertemplate: obj.hovertemplate,
-            hovertemplateLabels: hovertemplateLabels,
-            eventData: [d.link]
-        }, {
+        var tooltips = Fx.multiHovers(hoverItems, {
             container: fullLayout._hoverlayer.node(),
             outerContainer: fullLayout._paper.node(),
             gd: gd
         });
 
-        if(!d.link.concentrationscale) {
-            makeTranslucent(tooltip, 0.65);
-        }
-        makeTextContrasty(tooltip);
+        tooltips.each(function() {
+            var tooltip = this;
+            if(!d.link.concentrationscale) {
+                makeTranslucent(tooltip, 0.65);
+            }
+            makeTextContrasty(tooltip);
+        });
     };
 
     var linkUnhover = function(element, d, sankey) {

src/traces/sankey/render.js

@@ -142,6 +142,9 @@ function sankeyModel(layout, d, traceIndex) {
                         concentration: link.value / total,
                         links: flowLinks
                     };
+                    if(link.concentrationscale) {
+                        link.color = tinycolor(link.concentrationscale(link.flow.labelConcentration));
+                    }
                 }
             }
 
@@ -287,9 +290,6 @@ function sankeyModel(layout, d, traceIndex) {
 
 function linkModel(d, l, i) {
     var tc = tinycolor(l.color);
-    if(l.concentrationscale) {
-        tc = tinycolor(l.concentrationscale(l.flow.labelConcentration));
-    }
     var basicKey = l.source.label + '|' + l.target.label;
     var key = basicKey + '__' + i;
 

test/image/mocks/sankey_link_concentration.json

@@ -70,6 +70,7 @@
     "layout": {
         "title": "Sankey diagram with links colored based on their concentration within a flow",
         "width": 800,
-        "height": 800
+        "height": 800,
+        "hovermode": "x"
     }
 }