sankey: multiple hover labels for links part of a flow

Author: antoinerg

src/traces/sankey/plot.js

@@ -156,42 +156,49 @@ 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];
+            obj = 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 tooltip = Fx.multiHovers(hoverItems, {
             container: fullLayout._hoverlayer.node(),
             outerContainer: fullLayout._paper.node(),
             gd: gd

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;