diff --git a/draftlogs/6799_fix.md b/draftlogs/6799_fix.md new file mode 100644 index 00000000000..a3b9dcc1ab7 --- /dev/null +++ b/draftlogs/6799_fix.md @@ -0,0 +1 @@ + - Fix hovering over Sankey node only fully highlights first trace [[#6799](https://github.com/plotly/plotly.js/pull/6799)], with thanks to @DominicWuest for the contribution! diff --git a/src/traces/sankey/plot.js b/src/traces/sankey/plot.js index 715a47ff36c..8907d1fc02f 100644 --- a/src/traces/sankey/plot.js +++ b/src/traces/sankey/plot.js @@ -62,24 +62,25 @@ function nodeNonHoveredStyle(sankeyNode, d, sankey) { } function linkHoveredStyle(d, sankey, visitNodes, sankeyLink) { - var label = sankeyLink.datum().link.label; - sankeyLink.style('fill-opacity', function(l) { if(!l.link.concentrationscale) { return 0.4; } }); - if(label) { - ownTrace(sankey, d) - .selectAll('.' + cn.sankeyLink) - .filter(function(l) {return l.link.label === label;}) - .style('fill-opacity', function(l) { - if(!l.link.concentrationscale) { - return 0.4; - } - }); - } + sankeyLink.each(function(curLink) { + var label = curLink.link.label; + if(label !== '') { + ownTrace(sankey, d) + .selectAll('.' + cn.sankeyLink) + .filter(function(l) {return l.link.label === label;}) + .style('fill-opacity', function(l) { + if(!l.link.concentrationscale) { + return 0.4; + } + }); + } + }); if(visitNodes) { ownTrace(sankey, d) @@ -90,15 +91,17 @@ function linkHoveredStyle(d, sankey, visitNodes, sankeyLink) { } function linkNonHoveredStyle(d, sankey, visitNodes, sankeyLink) { - var label = sankeyLink.datum().link.label; - sankeyLink.style('fill-opacity', function(d) {return d.tinyColorAlpha;}); - if(label) { - ownTrace(sankey, d) - .selectAll('.' + cn.sankeyLink) - .filter(function(l) {return l.link.label === label;}) - .style('fill-opacity', function(d) {return d.tinyColorAlpha;}); - } + + sankeyLink.each(function(curLink) { + var label = curLink.link.label; + if(label !== '') { + ownTrace(sankey, d) + .selectAll('.' + cn.sankeyLink) + .filter(function(l) {return l.link.label === label;}) + .style('fill-opacity', function(d) {return d.tinyColorAlpha;}); + } + }); if(visitNodes) { ownTrace(sankey, d) diff --git a/test/jasmine/tests/sankey_test.js b/test/jasmine/tests/sankey_test.js index 3fb1d7188e5..18506de1eee 100644 --- a/test/jasmine/tests/sankey_test.js +++ b/test/jasmine/tests/sankey_test.js @@ -1073,6 +1073,34 @@ describe('sankey tests', function() { }) .then(done, done.fail); }); + + it('should (un-)highlight all traces ending in a (un-)hovered node', function(done) { + var gd = createGraphDiv(); + var mockCopy = Lib.extendDeep({}, mock); + + Plotly.newPlot(gd, mockCopy) + .then(function() { + _hover(200, 250); + }) + .then(function() { + d3SelectAll('.sankey-link') + .filter(function(obj) { + return obj.link.label === 'stream 1'; + })[0].forEach(function(l) { + expect(l.style.fillOpacity).toEqual('0.4'); + }); + }).then(function() { + mouseEvent('mouseout', 200, 250); + }).then(function() { + d3SelectAll('.sankey-link') + .filter(function(obj) { + return obj.link.label === 'stream 1'; + })[0].forEach(function(l) { + expect(l.style.fillOpacity).toEqual('0.2'); + }); + }) + .then(done, done.fail); + }); }); describe('Test hover/click event data:', function() {