factoring out and uppercasing class names - sankey

Author: monfera

src/traces/sankey/constants.js

@@ -16,5 +16,18 @@ module.exports = {
     forceIterations: 5,
     forceTicksPerFrame: 10,
     duration: 500,
-    ease: 'cubic-in-out'
+    ease: 'cubic-in-out',
+    cn: {
+        sankey: 'sankey',
+        sankeyLinks: 'sankey-links',
+        sankeyLink: 'sankey-link',
+        sankeyNodeSet: 'sankey-node-set',
+        sankeyNode: 'sankey-node',
+        nodeRect: 'node-rect',
+        nodeCapture: 'node-capture',
+        nodeCentered: 'node-entered',
+        nodeLabelGuide: 'node-label-guide',
+        nodeLabel: 'node-label',
+        nodeLabelTextPath: 'node-label-text-path'
+    }
 };

src/traces/sankey/plot.js

@@ -13,6 +13,7 @@ var render = require('./render');
 var Fx = require('../../components/fx');
 var Color = require('../../components/color');
 var Lib = require('../../lib');
+var cn = require('./constants').cn;
 
 function renderableValuePresent(d) {return d !== '';}
 
@@ -50,7 +51,7 @@ function relatedNodes(l) {
 function nodeHoveredStyle(sankeyNode, d, sankey) {
     if(d && sankey) {
         ownTrace(sankey, d)
-            .selectAll('.sankeyLink')
+            .selectAll('.' + cn.sankeyLink)
             .filter(relatedLinks(d))
             .call(linkHoveredStyle.bind(0, d, sankey, false));
     }
@@ -59,7 +60,7 @@ function nodeHoveredStyle(sankeyNode, d, sankey) {
 function nodeNonHoveredStyle(sankeyNode, d, sankey) {
     if(d && sankey) {
         ownTrace(sankey, d)
-            .selectAll('.sankeyLink')
+            .selectAll('.' + cn.sankeyLink)
             .filter(relatedLinks(d))
             .call(linkNonHoveredStyle.bind(0, d, sankey, false));
     }
@@ -73,14 +74,14 @@ function linkHoveredStyle(d, sankey, visitNodes, sankeyLink) {
 
     if(label) {
         ownTrace(sankey, d)
-            .selectAll('.sankeyLink')
+            .selectAll('.' + cn.sankeyLink)
             .filter(function(l) {return l.link.label === label;})
             .style('fill-opacity', 0.4);
     }
 
     if(visitNodes) {
         ownTrace(sankey, d)
-            .selectAll('.sankeyNode')
+            .selectAll('.' + cn.sankeyNode)
             .filter(relatedNodes(d))
             .call(nodeHoveredStyle);
     }
@@ -94,14 +95,14 @@ function linkNonHoveredStyle(d, sankey, visitNodes, sankeyLink) {
 
     if(label) {
         ownTrace(sankey, d)
-            .selectAll('.sankeyLink')
+            .selectAll('.' + cn.sankeyLink)
             .filter(function(l) {return l.link.label === label;})
             .style('fill-opacity', function(d) {return d.tinyColorAlpha;});
     }
 
     if(visitNodes) {
         ownTrace(sankey, d)
-            .selectAll('.sankeyNode')
+            .selectAll(cn.sankeyNode)
             .filter(relatedNodes(d))
             .call(nodeNonHoveredStyle);
     }
@@ -192,7 +193,7 @@ module.exports = function plot(gd, calcData) {
 
     var nodeHoverFollow = function(element, d) {
         var trace = d.node.trace;
-        var nodeRect = d3.select(element).select('.nodeRect');
+        var nodeRect = d3.select(element).select('.' + cn.nodeRect);
         var rootBBox = gd._fullLayout._paperdiv.node().getBoundingClientRect();
         var boundingBox = nodeRect.node().getBoundingClientRect();
         var hoverCenterX0 = boundingBox.left - 2 - rootBBox.left;

src/traces/sankey/render.js

@@ -414,7 +414,7 @@ function snappingForce(sankeyNode, forceKey, nodes, d) {
 
 // scene graph
 module.exports = function(svg, styledData, layout, callbacks) {
-    var sankey = svg.selectAll('.sankey')
+    var sankey = svg.selectAll('.' + c.cn.sankey)
         .data(styledData
                 .filter(function(d) {return unwrap(d).trace.visible;})
                 .map(sankeyModel.bind(null, layout)),
@@ -425,7 +425,7 @@ module.exports = function(svg, styledData, layout, callbacks) {
 
     sankey.enter()
         .append('g')
-        .classed('sankey', true)
+        .classed(c.cn.sankey, true)
         .style('box-sizing', 'content-box')
         .style('position', 'absolute')
         .style('left', 0)
@@ -438,15 +438,15 @@ module.exports = function(svg, styledData, layout, callbacks) {
         .ease(c.ease).duration(c.duration)
         .attr('transform', sankeyTransform);
 
-    var sankeyLinks = sankey.selectAll('.sankeyLinks')
+    var sankeyLinks = sankey.selectAll('.' + c.cn.sankeyLinks)
         .data(repeat, keyFun);
 
     sankeyLinks.enter()
         .append('g')
-        .classed('sankeyLinks', true)
+        .classed(c.cn.sankeyLinks, true)
         .style('fill', 'none');
 
-    var sankeyLink = sankeyLinks.selectAll('.sankeyLink')
+    var sankeyLink = sankeyLinks.selectAll('.' + c.cn.sankeyLink)
         .data(function(d) {
             var uniqueKeys = {};
             return d.sankey.links()
@@ -456,7 +456,7 @@ module.exports = function(svg, styledData, layout, callbacks) {
 
     sankeyLink.enter()
         .append('path')
-        .classed('sankeyLink', true)
+        .classed(c.cn.sankeyLink, true)
         .attr('d', linkPath)
         .call(attachPointerEvents, sankey, callbacks.linkEvents);
 
@@ -480,12 +480,12 @@ module.exports = function(svg, styledData, layout, callbacks) {
         .style('opacity', 0)
         .remove();
 
-    var sankeyNodeSet = sankey.selectAll('.sankeyNodeSet')
+    var sankeyNodeSet = sankey.selectAll('.' + c.cn.sankeyNodeSet)
         .data(repeat, keyFun);
 
     sankeyNodeSet.enter()
         .append('g')
-        .classed('sankeyNodeSet', true);
+        .classed(c.cn.sankeyNodeSet, true);
 
     sankeyNodeSet
         .style('cursor', function(d) {
@@ -496,7 +496,7 @@ module.exports = function(svg, styledData, layout, callbacks) {
             }
         });
 
-    var sankeyNode = sankeyNodeSet.selectAll('.sankeyNode')
+    var sankeyNode = sankeyNodeSet.selectAll('.' + c.cn.sankeyNode)
         .data(function(d) {
             var nodes = d.sankey.nodes();
             var uniqueKeys = {};
@@ -508,7 +508,7 @@ module.exports = function(svg, styledData, layout, callbacks) {
 
     sankeyNode.enter()
         .append('g')
-        .classed('sankeyNode', true)
+        .classed(c.cn.sankeyNode, true)
         .call(updateNodePositions)
         .call(attachPointerEvents, sankey, callbacks.nodeEvents);
 
@@ -524,12 +524,12 @@ module.exports = function(svg, styledData, layout, callbacks) {
         .style('opacity', 0)
         .remove();
 
-    var nodeRect = sankeyNode.selectAll('.nodeRect')
+    var nodeRect = sankeyNode.selectAll('.' + c.cn.nodeRect)
         .data(repeat);
 
     nodeRect.enter()
         .append('rect')
-        .classed('nodeRect', true)
+        .classed(c.cn.nodeRect, true)
         .call(sizeNode);
 
     nodeRect
@@ -543,12 +543,12 @@ module.exports = function(svg, styledData, layout, callbacks) {
         .ease(c.ease).duration(c.duration)
         .call(sizeNode);
 
-    var nodeCapture = sankeyNode.selectAll('.nodeCapture')
+    var nodeCapture = sankeyNode.selectAll('.' + c.cn.nodeCapture)
         .data(repeat);
 
     nodeCapture.enter()
         .append('rect')
-        .classed('nodeCapture', true)
+        .classed(c.cn.nodeCapture, true)
         .style('fill-opacity', 0);
 
     nodeCapture
@@ -557,25 +557,25 @@ module.exports = function(svg, styledData, layout, callbacks) {
         .attr('width', function(d) {return d.zoneWidth;})
         .attr('height', function(d) {return d.zoneHeight;});
 
-    var nodeCentered = sankeyNode.selectAll('.nodeCentered')
+    var nodeCentered = sankeyNode.selectAll('.' + c.cn.nodeCentered)
         .data(repeat);
 
     nodeCentered.enter()
         .append('g')
-        .classed('nodeCentered', true)
+        .classed(c.cn.nodeCentered, true)
         .attr('transform', nodeCentering);
 
     nodeCentered
         .transition()
         .ease(c.ease).duration(c.duration)
         .attr('transform', nodeCentering);
 
-    var nodeLabelGuide = nodeCentered.selectAll('.nodeLabelGuide')
+    var nodeLabelGuide = nodeCentered.selectAll('.' + c.cn.nodeLabelGuide)
         .data(repeat);
 
     nodeLabelGuide.enter()
         .append('path')
-        .classed('nodeLabelGuide', true)
+        .classed(c.cn.nodeLabelGuide, true)
         .attr('id', function(d) {return d.uniqueNodeLabelPathId;})
         .attr('d', textGuidePath)
         .attr('transform', sankeyInverseTransform);
@@ -586,12 +586,12 @@ module.exports = function(svg, styledData, layout, callbacks) {
         .attr('d', textGuidePath)
         .attr('transform', sankeyInverseTransform);
 
-    var nodeLabel = nodeCentered.selectAll('.nodeLabel')
+    var nodeLabel = nodeCentered.selectAll('.' + c.cn.nodeLabel)
         .data(repeat);
 
     nodeLabel.enter()
         .append('text')
-        .classed('nodeLabel', true)
+        .classed(c.cn.nodeLabel, true)
         .attr('transform', textFlip)
         .style('user-select', 'none')
         .style('cursor', 'default')
@@ -608,12 +608,12 @@ module.exports = function(svg, styledData, layout, callbacks) {
         .ease(c.ease).duration(c.duration)
         .attr('transform', textFlip);
 
-    var nodeLabelTextPath = nodeLabel.selectAll('.nodeLabelTextPath')
+    var nodeLabelTextPath = nodeLabel.selectAll('.' + c.cn.nodeLabelTextPath)
         .data(repeat);
 
     nodeLabelTextPath.enter()
         .append('textPath')
-        .classed('nodeLabelTextPath', true)
+        .classed(c.cn.nodeLabelTextPath, true)
         .attr('alignment-baseline', 'middle')
         .attr('xlink:href', function(d) {return '#' + d.uniqueNodeLabelPathId;})
         .attr('startOffset', nodeTextOffset)

test/jasmine/tests/sankey_test.js

@@ -365,7 +365,7 @@ describe('sankey tests', function() {
             }];
             Plotly.plot(gd, minimock)
                 .then(function() {
-                    expect(d3.selectAll('.sankey .nodeRect')[0].reduce(function(prevMin, rect) {
+                    expect(d3.selectAll('.sankey .node-rect')[0].reduce(function(prevMin, rect) {
                         return Math.min(prevMin, d3.select(rect).attr('height'));
                     }, Infinity)).toEqual(0.5);
                     done();