diff --git a/src/components/fx/hover.js b/src/components/fx/hover.js index c414b95454..9a2efdc3b6 100644 --- a/src/components/fx/hover.js +++ b/src/components/fx/hover.js @@ -213,9 +213,10 @@ exports.multiHovers = function multiHovers(hoverItems, opts) { // Fix vertical overlap var tooltipSpacing = 5; var lastBottomY = 0; + var anchor = 0; hoverLabel .sort(function(a, b) {return a.y0 - b.y0;}) - .each(function(d) { + .each(function(d, i) { var topY = d.y0 - d.by / 2; if((topY - tooltipSpacing) < lastBottomY) { @@ -225,8 +226,12 @@ exports.multiHovers = function multiHovers(hoverItems, opts) { } lastBottomY = topY + d.by + d.offset; - }); + if(i === opts.anchorIndex || 0) anchor = d.offset; + }) + .each(function(d) { + d.offset -= anchor; + }); alignHoverText(hoverLabel, fullOpts.rotateLabels); diff --git a/src/traces/sankey/plot.js b/src/traces/sankey/plot.js index 8a4d518fec..8f3815b79e 100644 --- a/src/traces/sankey/plot.js +++ b/src/traces/sankey/plot.js @@ -159,14 +159,8 @@ module.exports = function plot(gd, calcData) { 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; + function hoverCenterPosition(link) { + var hoverCenterX, hoverCenterY; if(link.circular) { hoverCenterX = (link.circularPathData.leftInnerExtent + link.circularPathData.rightInnerExtent) / 2 + d.parent.translateX; hoverCenterY = link.circularPathData.verticalFullExtent + d.parent.translateY; @@ -174,12 +168,23 @@ module.exports = function plot(gd, calcData) { hoverCenterX = (link.source.x1 + link.target.x0) / 2 + d.parent.translateX; hoverCenterY = (link.y0 + link.y1) / 2 + d.parent.translateY; } + return [hoverCenterX, hoverCenterY]; + } + // For each related links, create a hoverItem + var anchorIndex = 0; + 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; + if(d.link.pointNumber === link.pointNumber) anchorIndex = i; + link.fullData = link.trace; + obj = d.link.trace.link; + var hoverCenter = hoverCenterPosition(link); var hovertemplateLabels = {valueLabel: d3.format(d.valueFormat)(link.value) + d.valueSuffix}; hoverItems.push({ - x: hoverCenterX, - y: hoverCenterY, + x: hoverCenter[0], + y: hoverCenter[1], name: hovertemplateLabels.valueLabel, text: [ link.label || '', @@ -192,7 +197,7 @@ module.exports = function plot(gd, calcData) { fontFamily: castHoverOption(obj, 'font.family'), fontSize: castHoverOption(obj, 'font.size'), fontColor: castHoverOption(obj, 'font.color'), - idealAlign: d3.event.x < hoverCenterX ? 'right' : 'left', + idealAlign: d3.event.x < hoverCenter[0] ? 'right' : 'left', hovertemplate: obj.hovertemplate, hovertemplateLabels: hovertemplateLabels, @@ -203,7 +208,8 @@ module.exports = function plot(gd, calcData) { var tooltips = Fx.multiHovers(hoverItems, { container: fullLayout._hoverlayer.node(), outerContainer: fullLayout._paper.node(), - gd: gd + gd: gd, + anchorIndex: anchorIndex }); tooltips.each(function() { diff --git a/test/image/mocks/sankey_circular_large.json b/test/image/mocks/sankey_circular_large.json index 6af2352129..99c8af5835 100644 --- a/test/image/mocks/sankey_circular_large.json +++ b/test/image/mocks/sankey_circular_large.json @@ -220,10 +220,11 @@ [1, "#9467bd"] ] }], - "hovertemplate": "%{label}
%{flow.labelConcentration:%0.2f}
%{flow.value}" + "hovertemplate": "%{label}
flow.labelConcentration: %{flow.labelConcentration:0.2%}
flow.concentration: %{flow.concentration:0.2%}
flow.value: %{flow.value}" } }], "layout": { + "hovermode": "x", "width": 800, "height": 800 }