Merge pull request #3406 from plotly/sankey-circular

d3-sankey-circular

Author: antoinerg

package-lock.json

@@ -58,15 +58,17 @@
   },
   "dependencies": {
     "3d-view": "^2.0.0",
-    "@plotly/d3-sankey": "^0.5.1",
     "alpha-shape": "^1.0.0",
     "array-range": "^1.0.1",
     "canvas-fit": "^1.5.0",
     "color-normalize": "^1.3.0",
     "convex-hull": "^1.0.3",
     "country-regex": "^1.1.0",
     "d3": "^3.5.12",
+    "@plotly/d3-sankey": "0.7.2",
+    "d3-sankey-circular": "0.32.0",
     "d3-force": "^1.0.6",
+    "d3-interpolate": "1",
     "delaunay-triangulate": "^1.1.6",
     "es6-promise": "^3.0.2",
     "fast-isnumeric": "^1.1.2",

package.json

@@ -12,6 +12,77 @@ var tarjan = require('strongly-connected-components');
 var Lib = require('../../lib');
 var wrap = require('../../lib/gup').wrap;
 
+var isArrayOrTypedArray = Lib.isArrayOrTypedArray;
+var isIndex = Lib.isIndex;
+
+
+function convertToD3Sankey(trace) {
+    var nodeSpec = trace.node;
+    var linkSpec = trace.link;
+
+    var links = [];
+    var hasLinkColorArray = isArrayOrTypedArray(linkSpec.color);
+    var linkedNodes = {};
+
+    var nodeCount = nodeSpec.label.length;
+    var i;
+    for(i = 0; i < linkSpec.value.length; i++) {
+        var val = linkSpec.value[i];
+        // remove negative values, but keep zeros with special treatment
+        var source = linkSpec.source[i];
+        var target = linkSpec.target[i];
+        if(!(val > 0 && isIndex(source, nodeCount) && isIndex(target, nodeCount))) {
+            continue;
+        }
+
+        source = +source;
+        target = +target;
+        linkedNodes[source] = linkedNodes[target] = true;
+
+        var label = '';
+        if(linkSpec.label && linkSpec.label[i]) label = linkSpec.label[i];
+
+        links.push({
+            pointNumber: i,
+            label: label,
+            color: hasLinkColorArray ? linkSpec.color[i] : linkSpec.color,
+            source: source,
+            target: target,
+            value: +val
+        });
+    }
+
+    var hasNodeColorArray = isArrayOrTypedArray(nodeSpec.color);
+    var nodes = [];
+    var removedNodes = false;
+    var nodeIndices = {};
+
+    for(i = 0; i < nodeCount; i++) {
+        if(linkedNodes[i]) {
+            var l = nodeSpec.label[i];
+            nodeIndices[i] = nodes.length;
+            nodes.push({
+                pointNumber: i,
+                label: l,
+                color: hasNodeColorArray ? nodeSpec.color[i] : nodeSpec.color
+            });
+        } else removedNodes = true;
+    }
+
+    // need to re-index links now, since we didn't put all the nodes in
+    if(removedNodes) {
+        for(i = 0; i < links.length; i++) {
+            links[i].source = nodeIndices[links[i].source];
+            links[i].target = nodeIndices[links[i].target];
+        }
+    }
+
+    return {
+        links: links,
+        nodes: nodes
+    };
+}
+
 function circularityPresent(nodeList, sources, targets) {
 
     var nodeLen = nodeList.length;
@@ -36,20 +107,16 @@ function circularityPresent(nodeList, sources, targets) {
 }
 
 module.exports = function calc(gd, trace) {
-
+    var circular = false;
     if(circularityPresent(trace.node.label, trace.link.source, trace.link.target)) {
-        Lib.error('Circularity is present in the Sankey data. Removing all nodes and links.');
-        trace.link.label = [];
-        trace.link.source = [];
-        trace.link.target = [];
-        trace.link.value = [];
-        trace.link.color = [];
-        trace.node.label = [];
-        trace.node.color = [];
+        circular = true;
     }
 
+    var result = convertToD3Sankey(trace);
+
     return wrap({
-        link: trace.link,
-        node: trace.node
+        circular: circular,
+        _nodes: result.nodes,
+        _links: result.links
     });
 };

src/traces/sankey/calc.js

@@ -94,7 +94,6 @@ 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)
@@ -152,16 +151,23 @@ module.exports = function plot(gd, calcData) {
         var obj = d.link.trace.link;
         if(obj.hoverinfo === 'none' || obj.hoverinfo === 'skip') return;
         var rootBBox = gd._fullLayout._paperdiv.node().getBoundingClientRect();
-        var boundingBox = element.getBoundingClientRect();
-        var hoverCenterX = boundingBox.left + boundingBox.width / 2;
-        var hoverCenterY = boundingBox.top + boundingBox.height / 2;
+        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 tooltip = Fx.loneHover({
-            x: hoverCenterX - rootBBox.left,
-            y: hoverCenterY - rootBBox.top,
+            x: hoverCenterX,
+            y: hoverCenterY,
             name: hovertemplateLabels.valueLabel,
             text: [
                 d.link.label || '',