Feature: Sankey Link Hover Styling

draftlogs/6839_change.md

@@ -0,0 +1 @@
+- Update Sankey trace to allow user-defined link hover style override [[#6839](https://github.com/plotly/plotly.js/pull/6839)]

src/traces/sankey/plot.js

@@ -10,6 +10,8 @@ var cn = require('./constants').cn;
 
 var _ = Lib._;
 
+var linkStyleInitialized = false;
+
 function renderableValuePresent(d) {return d !== '';}
 
 function ownTrace(selection, d) {
@@ -62,9 +64,42 @@ function nodeNonHoveredStyle(sankeyNode, d, sankey) {
 }
 
 function linkHoveredStyle(d, sankey, visitNodes, sankeyLink) {
-    sankeyLink.style('fill-opacity', function(l) {
+    if(!linkStyleInitialized) {
+        // Figure out whether the user has provided their own sankey-link-hover style.
+        var styleExists = false;
+        for(var i = 0; i < document.styleSheets.length; i++) {
+            try {
+                var rules = document.styleSheets[i].cssRules;
+                for(var j = 0; j < rules.length; j++) {
+                    if(rules[j].selectorText === '.sankey-link-hover') {
+                        styleExists = true;
+                        break;
+                    }
+                }
+                if(styleExists) break;
+            } catch(e) {
+                // This particular style sheet cannot be accessed (due to CORS policy)
+            }
+        }
+
+        // If not, insert a default one
+        if(!styleExists) {
+            var style = document.querySelector('style');
+            if(!style) {
+                style = document.createElement('style');
+                document.head.appendChild(style);
+            }
+            var sheet = style.sheet;
+            // If these are not flagged as !important chrome won't render the change
+            sheet.insertRule('.sankey-link-hover { fill-opacity: 0.4 !important; }', 0);
+        }
+
+        linkStyleInitialized = true;
+    }
+
+    sankeyLink.classed('sankey-link-hover', function(l) {
         if(!l.link.concentrationscale) {
-            return 0.4;
+            return true;
         }
     });
 
@@ -74,9 +109,9 @@ function linkHoveredStyle(d, sankey, visitNodes, sankeyLink) {
             ownTrace(sankey, d)
                 .selectAll('.' + cn.sankeyLink)
                 .filter(function(l) {return l.link.label === label;})
-                .style('fill-opacity', function(l) {
+                .classed('sankey-link-hover', function(l) {
                     if(!l.link.concentrationscale) {
-                        return 0.4;
+                        return true;
                     }
                 });
         }
@@ -91,15 +126,15 @@ function linkHoveredStyle(d, sankey, visitNodes, sankeyLink) {
 }
 
 function linkNonHoveredStyle(d, sankey, visitNodes, sankeyLink) {
-    sankeyLink.style('fill-opacity', function(d) {return d.tinyColorAlpha;});
+    sankeyLink.classed('sankey-link-hover', false);
 
     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;});
+                .classed('sankey-link-hover', false);
         }
     });
 

test/jasmine/tests/sankey_test.js

@@ -1087,7 +1087,7 @@ describe('sankey tests', function() {
                         .filter(function(obj) {
                             return obj.link.label === 'stream 1';
                         })[0].forEach(function(l) {
-                            expect(l.style.fillOpacity).toEqual('0.4');
+                            expect(l.classList.contains('sankey-link-hover')).toBe(true);
                         });
                 }).then(function() {
                     mouseEvent('mouseout', 200, 250);
@@ -1096,7 +1096,7 @@ describe('sankey tests', function() {
                         .filter(function(obj) {
                             return obj.link.label === 'stream 1';
                         })[0].forEach(function(l) {
-                            expect(l.style.fillOpacity).toEqual('0.2');
+                            expect(l.classList.contains('sankey-link-hover')).toBe(false);
                         });
                 })
                 .then(done, done.fail);