You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by de...@apache.org on 2018/08/15 12:29:03 UTC

[incubator-echarts] branch master updated: feat(sankey): add vertical layout of sankey

This is an automated email from the ASF dual-hosted git repository.

deqingli pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git


The following commit(s) were added to refs/heads/master by this push:
     new 6fbd3ad  feat(sankey): add vertical layout of sankey
6fbd3ad is described below

commit 6fbd3adbfc9bb1fac71eefc019db6f733dc04188
Author: deqingli <an...@gmail.com>
AuthorDate: Wed Aug 15 20:28:13 2018 +0800

    feat(sankey): add vertical layout of sankey
---
 src/chart/sankey/SankeySeries.js |  16 +-
 src/chart/sankey/SankeyView.js   |  65 +++++---
 src/chart/sankey/sankeyLayout.js | 338 +++++++++++++++++++++++++--------------
 test/sankey-test.html            |   9 +-
 test/singleAxisScales.html       |   4 +-
 test/tree-basic.html             |   2 +-
 6 files changed, 282 insertions(+), 152 deletions(-)

diff --git a/src/chart/sankey/SankeySeries.js b/src/chart/sankey/SankeySeries.js
index 8f25b61..e5acf52 100644
--- a/src/chart/sankey/SankeySeries.js
+++ b/src/chart/sankey/SankeySeries.js
@@ -97,24 +97,28 @@ var SankeySeries = SeriesModel.extend({
 
         layout: null,
 
-        // the position of the whole view
+        // The position of the whole view
         left: '5%',
         top: '5%',
         right: '20%',
         bottom: '5%',
 
-        // the dx of the node
+        // Value can be 'vertical'
+        orient: 'horizontal',
+
+        // The dx of the node
         nodeWidth: 20,
 
-        // the vertical distance between two nodes
+        // The vertical distance between two nodes
         nodeGap: 8,
 
-        // control if the node can move or not
+        // Control if the node can move or not
         draggable: true,
-       
+
+       // Value can be 'inEdges', 'outEdges', 'allEdges'.
         focusNodeAdjacency: false,
 
-        // the number of iterations to change the position of the node
+        // The number of iterations to change the position of the node
         layoutIterations: 32,
 
         label: {
diff --git a/src/chart/sankey/SankeyView.js b/src/chart/sankey/SankeyView.js
index 1914eb8..8587377 100644
--- a/src/chart/sankey/SankeyView.js
+++ b/src/chart/sankey/SankeyView.js
@@ -68,24 +68,41 @@ var SankeyShape = graphic.extendShape({
         x2: 0, y2: 0,
         cpx1: 0, cpy1: 0,
         cpx2: 0, cpy2: 0,
-
-        extent: 0
+        extent: 0,
+        orient: ''
     },
 
     buildPath: function (ctx, shape) {
         var halfExtent = shape.extent / 2;
-        ctx.moveTo(shape.x1, shape.y1 - halfExtent);
-        ctx.bezierCurveTo(
-            shape.cpx1, shape.cpy1 - halfExtent,
-            shape.cpx2, shape.cpy2 - halfExtent,
-            shape.x2, shape.y2 - halfExtent
-        );
-        ctx.lineTo(shape.x2, shape.y2 + halfExtent);
-        ctx.bezierCurveTo(
-            shape.cpx2, shape.cpy2 + halfExtent,
-            shape.cpx1, shape.cpy1 + halfExtent,
-            shape.x1, shape.y1 + halfExtent
-        );
+        var orient = shape.orient;
+        if (orient === 'vertical') {
+            ctx.moveTo(shape.x1 - halfExtent, shape.y1);
+            ctx.bezierCurveTo(
+                shape.cpx1 - halfExtent, shape.cpy1,
+                shape.cpx2 - halfExtent, shape.cpy2,
+                shape.x2 - halfExtent, shape.y2
+            );
+            ctx.lineTo(shape.x2 + halfExtent, shape.y2);
+            ctx.bezierCurveTo(
+                shape.cpx2 + halfExtent, shape.cpy2,
+                shape.cpx1 + halfExtent, shape.cpy1,
+                shape.x1 + halfExtent, shape.y1
+            );
+        }
+        else {
+            ctx.moveTo(shape.x1, shape.y1 - halfExtent);
+            ctx.bezierCurveTo(
+                shape.cpx1, shape.cpy1 - halfExtent,
+                shape.cpx2, shape.cpy2 - halfExtent,
+                shape.x2, shape.y2 - halfExtent
+            );
+            ctx.lineTo(shape.x2, shape.y2 + halfExtent);
+            ctx.bezierCurveTo(
+                shape.cpx2, shape.cpy2 + halfExtent,
+                shape.cpx1, shape.cpy1 + halfExtent,
+                shape.x1, shape.y1 + halfExtent
+            );
+        }
         ctx.closePath();
     }
 });
@@ -144,28 +161,28 @@ export default echarts.extendChartView({
             var edgeLayout = edge.getLayout();
 
             curve.shape.extent = Math.max(1, edgeLayout.dy);
-
-            var x1 = (dragX1 != null ? dragX1 * width : n1Layout.x) + n1Layout.dx;
-            var y1 = (dragY1 != null ? dragY1 * height : n1Layout.y) + edgeLayout.sy + edgeLayout.dy / 2;
-            var x2 = dragX2 != null ? dragX2 * width : n2Layout.x;
-            var y2 = (dragY2 != null ? dragY2 * height : n2Layout.y) + edgeLayout.ty + edgeLayout.dy / 2;
+            curve.shape.orient = orient;
 
             if (orient === 'vertical') {
+                var x1 = (dragX1 != null ? dragX1 * width : n1Layout.x) + edgeLayout.sy + edgeLayout.dy / 2;
+                var y1 = (dragY1 != null ? dragY1 * height : n1Layout.y) + n1Layout.dy;
+                var x2 = (dragX2 != null ? dragX2 * width : n2Layout.x) + edgeLayout.ty + edgeLayout.dy / 2;
+                var y2 = dragY2 != null ? dragY2 * height : n2Layout.y;
                 var cpx1 = x1;
                 var cpy1 = y1 * (1 - curvature) + y2 * curvature;
                 var cpx2 = x2;
                 var cpy2 = y1 * curvature + y2 * (1 - curvature);
             }
             else {
+                var x1 = (dragX1 != null ? dragX1 * width : n1Layout.x) + n1Layout.dx;
+                var y1 = (dragY1 != null ? dragY1 * height : n1Layout.y) + edgeLayout.sy + edgeLayout.dy / 2;
+                var x2 = dragX2 != null ? dragX2 * width : n2Layout.x;
+                var y2 = (dragY2 != null ? dragY2 * height : n2Layout.y) + edgeLayout.ty + edgeLayout.dy / 2;
                 var cpx1 = x1 * (1 - curvature) + x2 * curvature;
                 var cpy1 = y1;
                 var cpx2 = x1 * curvature + x2 * (1 - curvature);
                 var cpy2 = y2;
             }
-            // var cpx1 = x1 * (1 - curvature) + x2 * curvature;
-            // var cpy1 = y1;
-            // var cpx2 = x1 * curvature + x2 * (1 - curvature);
-            // var cpy2 = y2;
 
             curve.setShape({
                 x1: x1,
@@ -387,7 +404,7 @@ export default echarts.extendChartView({
     }
 });
 
-// add animation to the view
+// Add animation to the view
 function createGridClipShape(rect, seriesModel, cb) {
     var rectEl = new graphic.Rect({
         shape: {
diff --git a/src/chart/sankey/sankeyLayout.js b/src/chart/sankey/sankeyLayout.js
index 455bb44..a8ae43c 100644
--- a/src/chart/sankey/sankeyLayout.js
+++ b/src/chart/sankey/sankeyLayout.js
@@ -23,7 +23,6 @@
  */
 
 import * as layout from '../../util/layout';
-import nest from '../../util/array/nest';
 import * as zrUtil from 'zrender/src/core/util';
 import { __DEV__ } from '../../config';
 
@@ -55,7 +54,9 @@ export default function (ecModel, api, payload) {
         var iterations = filteredNodes.length !== 0
             ? 0 : seriesModel.get('layoutIterations');
 
-        layoutSankey(nodes, edges, nodeWidth, nodeGap, width, height, iterations);
+        var orient = seriesModel.get('orient');
+
+        layoutSankey(nodes, edges, nodeWidth, nodeGap, width, height, iterations, orient);
     });
 }
 
@@ -75,10 +76,10 @@ function getViewRect(seriesModel, api) {
     );
 }
 
-function layoutSankey(nodes, edges, nodeWidth, nodeGap, width, height, iterations) {
-    computeNodeBreadths(nodes, edges, nodeWidth, width);
-    computeNodeDepths(nodes, edges, height, nodeGap, iterations);
-    computeEdgeDepths(nodes);
+function layoutSankey(nodes, edges, nodeWidth, nodeGap, width, height, iterations, orient) {
+    computeNodeBreadths(nodes, edges, nodeWidth, width, height, orient);
+    computeNodeDepths(nodes, edges, height, width, nodeGap, iterations, orient);
+    computeEdgeDepths(nodes, orient);
 }
 
 /**
@@ -97,7 +98,7 @@ function computeNodeValues(nodes) {
 
 /**
  * Compute the x-position for each node.
- * 
+ *
  * Here we use Kahn algorithm to detect cycle when we traverse
  * the node to computer the initial x position.
  *
@@ -105,14 +106,17 @@ function computeNodeValues(nodes) {
  * @param  {number} nodeWidth  the dx of the node
  * @param  {number} width  the whole width of the area to draw the view
  */
-function computeNodeBreadths(nodes, edges, nodeWidth, width) {
+function computeNodeBreadths(nodes, edges, nodeWidth, width, height, orient) {
     // Used to mark whether the edge is deleted. if it is deleted,
     // the value is 0, otherwise it is 1.
     var remainEdges = [];
+
     // Storage each node's indegree.
     var indegreeArr = [];
+
     //Used to storage the node with indegree is equal to 0.
     var zeroIndegrees = [];
+
     var nextNode = [];
     var x = 0;
     var kx = 0;
@@ -121,17 +125,23 @@ function computeNodeBreadths(nodes, edges, nodeWidth, width) {
         remainEdges[i] = 1;
     }
 
-    for (var i = 0; i < nodes.length; i++) {
+    for (i = 0; i < nodes.length; i++) {
         indegreeArr[i] = nodes[i].inEdges.length;
         if (indegreeArr[i] === 0) {
             zeroIndegrees.push(nodes[i]);
         }
     }
-    
+
     while (zeroIndegrees.length) {
         zrUtil.each(zeroIndegrees, function (node) {
-            node.setLayout({x: x}, true);
-            node.setLayout({dx: nodeWidth}, true);
+            if (orient === 'vertical') {
+                node.setLayout({y: x}, true);
+                node.setLayout({dy: nodeWidth}, true);
+            }
+            else {
+                node.setLayout({x: x}, true);
+                node.setLayout({dx: nodeWidth}, true);
+            }
             zrUtil.each(node.outEdges, function (edge) {
                 var indexEdge = edges.indexOf(edge);
                 remainEdges[indexEdge] = 0;
@@ -142,24 +152,28 @@ function computeNodeBreadths(nodes, edges, nodeWidth, width) {
                 }
             });
         });
-       
         ++x;
         zeroIndegrees = nextNode;
         nextNode = [];
     }
-    
-    for (var i = 0; i < remainEdges.length; i++) {
+
+    for (i = 0; i < remainEdges.length; i++) {
         if (__DEV__) {
             if (remainEdges[i] === 1) {
                 throw new Error('Sankey is a DAG, the original data has cycle!');
             }
-        } 
+        }
     }
 
     moveSinksRight(nodes, x);
-    kx = (width - nodeWidth) / (x - 1);
 
-    scaleNodeBreadths(nodes, kx);
+    if (orient === 'vertical') {
+        kx = (height - nodeWidth) / (x - 1);
+    }
+    else {
+        kx = (width - nodeWidth) / (x - 1);
+    }
+    scaleNodeBreadths(nodes, kx, orient);
 }
 
 /**
@@ -170,10 +184,15 @@ function computeNodeBreadths(nodes, edges, nodeWidth, width) {
  * @param {number} x  value (x-1) use to assign to node without outEdges
  *     as x-position
  */
-function moveSinksRight(nodes, x) {
+function moveSinksRight(nodes, x, orient) {
     zrUtil.each(nodes, function (node) {
         if (!node.outEdges.length) {
-            node.setLayout({x: x - 1}, true);
+            if (orient === 'vertical') {
+                node.setLayout({y: x - 1}, true);
+            }
+            else {
+                node.setLayout({x: x - 1}, true);
+            }
         }
     });
 }
@@ -184,10 +203,16 @@ function moveSinksRight(nodes, x) {
  * @param {module:echarts/data/Graph~Node} nodes  node of sankey view
  * @param {number} kx   multiple used to scale nodes
  */
-function scaleNodeBreadths(nodes, kx) {
+function scaleNodeBreadths(nodes, kx, orient) {
     zrUtil.each(nodes, function (node) {
-        var nodeX = node.getLayout().x * kx;
-        node.setLayout({x: nodeX}, true);
+        if (orient === 'vertical') {
+            var nodeY = node.getLayout().y * kx;
+            node.setLayout({y: nodeY}, true);
+        }
+        else {
+            var nodeX = node.getLayout().x * kx;
+            node.setLayout({x: nodeX}, true);
+        }
     });
 }
 
@@ -201,28 +226,51 @@ function scaleNodeBreadths(nodes, kx) {
  *     in the same column.
  * @param {number} iterations  the number of iterations for the algorithm
  */
-function computeNodeDepths(nodes, edges, height, nodeGap, iterations) {
-    var nodesByBreadth = nest()
-        .key(function (d) {
-            return d.getLayout().x;
-        })
-        .sortKeys(ascending)
-        .entries(nodes)
-        .map(function (d) {
-            return d.values;
+function computeNodeDepths(nodes, edges, height, width, nodeGap, iterations, orient) {
+    var i = -1;
+    var valuesByKey = {};
+    while (++i < nodes.length) {
+        if (orient === 'vertical') {
+            var keyValue = nodes[i].getLayout().y;
+        }
+        else {
+            var keyValue = nodes[i].getLayout().x;
+        }
+        var values = valuesByKey[keyValue];
+        if (values) {
+            values.push(nodes[i]);
+        }
+        else {
+            valuesByKey[keyValue] = [nodes[i]];
+        }
+    }
+
+    var tempArray = [];
+    zrUtil.each(valuesByKey, function (value, key) {
+        tempArray.push({
+            key: key, values: value
         });
+    });
+
+    tempArray.sort(function (a, b) {
+        return a.key - b.key;
+    });
+
+    var nodesByBreadth = tempArray.map(function (d) {
+        return d.values;
+    });
 
-    initializeNodeDepth(nodes, nodesByBreadth, edges, height, nodeGap);
-    resolveCollisions(nodesByBreadth, nodeGap, height);
+    initializeNodeDepth(nodes, nodesByBreadth, edges, height, width, nodeGap, orient);
+    resolveCollisions(nodesByBreadth, nodeGap, height, width, orient);
 
     for (var alpha = 1; iterations > 0; iterations--) {
         // 0.99 is a experience parameter, ensure that each iterations of
         // changes as small as possible.
         alpha *= 0.99;
-        relaxRightToLeft(nodesByBreadth, alpha);
-        resolveCollisions(nodesByBreadth, nodeGap, height);
-        relaxLeftToRight(nodesByBreadth, alpha);
-        resolveCollisions(nodesByBreadth, nodeGap, height);
+        relaxRightToLeft(nodesByBreadth, alpha, orient);
+        resolveCollisions(nodesByBreadth, nodeGap, height, width, orient);
+        relaxLeftToRight(nodesByBreadth, alpha, orient);
+        resolveCollisions(nodesByBreadth, nodeGap, height, width, orient);
     }
 }
 
@@ -236,15 +284,21 @@ function computeNodeDepths(nodes, edges, height, nodeGap, iterations) {
  * @param {number} height  the whole height of the area to draw the view
  * @param {number} nodeGap  the vertical distance between two nodes
  */
-function initializeNodeDepth(nodes, nodesByBreadth, edges, height, nodeGap) {
+function initializeNodeDepth(nodes, nodesByBreadth, edges, height, width, nodeGap, orient) {
     var kyArray = [];
     zrUtil.each(nodesByBreadth, function (nodes) {
         var n = nodes.length;
         var sum = 0;
+        var ky = 0;
         zrUtil.each(nodes, function (node) {
             sum += node.getLayout().value;
         });
-        var ky = (height - (n - 1) * nodeGap) / sum;
+        if (orient === 'vertical') {
+            ky = (width - (n - 1) * nodeGap) / sum;
+        }
+        else {
+            ky = (height - (n - 1) * nodeGap) / sum;
+        }
         kyArray.push(ky);
     });
 
@@ -255,9 +309,16 @@ function initializeNodeDepth(nodes, nodesByBreadth, edges, height, nodeGap) {
 
     zrUtil.each(nodesByBreadth, function (nodes) {
         zrUtil.each(nodes, function (node, i) {
-            node.setLayout({y: i}, true);
             var nodeDy = node.getLayout().value * ky0;
-            node.setLayout({dy: nodeDy}, true);
+            if (orient === 'vertical') {
+                node.setLayout({x: i}, true);
+                node.setLayout({dx: nodeDy}, true);
+            }
+            else {
+                node.setLayout({y: i}, true);
+                node.setLayout({dy: nodeDy}, true);
+            }
+
         });
     });
 
@@ -275,7 +336,7 @@ function initializeNodeDepth(nodes, nodesByBreadth, edges, height, nodeGap) {
  * @param {number} nodeGap  the vertical distance between two nodes
  * @param {number} height  the whole height of the area to draw the view
  */
-function resolveCollisions(nodesByBreadth, nodeGap, height) {
+function resolveCollisions(nodesByBreadth, nodeGap, height, width, orient) {
     zrUtil.each(nodesByBreadth, function (nodes) {
         var node;
         var dy;
@@ -283,32 +344,64 @@ function resolveCollisions(nodesByBreadth, nodeGap, height) {
         var n = nodes.length;
         var i;
 
-        nodes.sort(ascendingDepth);
-
-        for (i = 0; i < n; i++) {
-            node = nodes[i];
-            dy = y0 - node.getLayout().y;
+        if (orient === 'vertical') {
+            nodes.sort(function (a, b) {
+                return a.getLayout().x - b.getLayout().x;
+            });
+            for (i = 0; i < n; i++) {
+                node = nodes[i];
+                dy = y0 - node.getLayout().x;
+                if (dy > 0) {
+                    var nodeX = node.getLayout().x + dy;
+                    node.setLayout({x: nodeX}, true);
+                }
+                y0 = node.getLayout().x + node.getLayout().dx + nodeGap;
+            }
+            // If the bottommost node goes outside the bounds, push it back up
+            dy = y0 - nodeGap - width;
             if (dy > 0) {
-                var nodeY = node.getLayout().y + dy;
-                node.setLayout({y: nodeY}, true);
+                nodeX = node.getLayout().x - dy;
+                node.setLayout({x: nodeX}, true);
+                y0 = nodeX;
+                for (i = n - 2; i >= 0; --i) {
+                    node = nodes[i];
+                    dy = node.getLayout().x + node.getLayout().dx + nodeGap - y0;
+                    if (dy > 0) {
+                        nodeX = node.getLayout().x - dy;
+                        node.setLayout({x: nodeX}, true);
+                    }
+                    y0 = node.getLayout().x;
+                }
             }
-            y0 = node.getLayout().y + node.getLayout().dy + nodeGap;
         }
-
-        // If the bottommost node goes outside the bounds, push it back up
-        dy = y0 - nodeGap - height;
-        if (dy > 0) {
-            var nodeY = node.getLayout().y - dy;
-            node.setLayout({y: nodeY}, true);
-            y0 = node.getLayout().y;
-            for (i = n - 2; i >= 0; --i) {
+        else {
+            nodes.sort(function (a, b) {
+                return a.getLayout().y - b.getLayout().y;
+            });
+            for (i = 0; i < n; i++) {
                 node = nodes[i];
-                dy = node.getLayout().y + node.getLayout().dy + nodeGap - y0;
+                dy = y0 - node.getLayout().y;
                 if (dy > 0) {
-                    nodeY = node.getLayout().y - dy;
+                    var nodeY = node.getLayout().y + dy;
                     node.setLayout({y: nodeY}, true);
                 }
-                y0 = node.getLayout().y;
+                y0 = node.getLayout().y + node.getLayout().dy + nodeGap;
+            }
+            // If the bottommost node goes outside the bounds, push it back up
+            dy = y0 - nodeGap - height;
+            if (dy > 0) {
+                nodeY = node.getLayout().y - dy;
+                node.setLayout({y: nodeY}, true);
+                y0 = nodeY;
+                for (i = n - 2; i >= 0; --i) {
+                    node = nodes[i];
+                    dy = node.getLayout().y + node.getLayout().dy + nodeGap - y0;
+                    if (dy > 0) {
+                        nodeY = node.getLayout().y - dy;
+                        node.setLayout({y: nodeY}, true);
+                    }
+                    y0 = node.getLayout().y;
+                }
             }
         }
     });
@@ -321,20 +414,54 @@ function resolveCollisions(nodesByBreadth, nodeGap, height) {
  *     group by the array of all sankey nodes based on the node x-position.
  * @param {number} alpha  parameter used to adjust the nodes y-position
  */
-function relaxRightToLeft(nodesByBreadth, alpha) {
+function relaxRightToLeft(nodesByBreadth, alpha, orient) {
     zrUtil.each(nodesByBreadth.slice().reverse(), function (nodes) {
         zrUtil.each(nodes, function (node) {
             if (node.outEdges.length) {
-                var y = sum(node.outEdges, weightedTarget) / sum(node.outEdges, getEdgeValue);
-                var nodeY = node.getLayout().y + (y - center(node)) * alpha;
-                node.setLayout({y: nodeY}, true);
+                var y = sum(node.outEdges, weightedTarget, orient) / sum(node.outEdges, getEdgeValue, orient);
+                if (orient === 'vertical') {
+                    var nodeX = node.getLayout().x + (y - center(node, orient)) * alpha;
+                    node.setLayout({x: nodeX}, true);
+                }
+                else {
+                    var nodeY = node.getLayout().y + (y - center(node, orient)) * alpha;
+                    node.setLayout({y: nodeY}, true);
+                }
             }
         });
     });
 }
 
-function weightedTarget(edge) {
-    return center(edge.node2) * edge.getValue();
+function weightedTarget(edge, orient) {
+    return center(edge.node2, orient) * edge.getValue();
+}
+
+function weightedSource(edge, orient) {
+    return center(edge.node1, orient) * edge.getValue();
+}
+
+function center(node, orient) {
+    if (orient === 'vertical') {
+        return node.getLayout().x + node.getLayout().dx / 2;
+    }
+    return node.getLayout().y + node.getLayout().dy / 2;
+}
+
+function getEdgeValue(edge) {
+    return edge.getValue();
+}
+
+function sum(array, f, orient) {
+    var sum = 0;
+    var len = array.length;
+    var i = -1;
+    while (++i < len) {
+        var value = +f.call(array, array[i], orient);
+        if (!isNaN(value)) {
+            sum += value;
+        }
+    }
+    return sum;
 }
 
 /**
@@ -344,31 +471,47 @@ function weightedTarget(edge) {
  *     group by the array of all sankey nodes based on the node x-position.
  * @param {number} alpha  parameter used to adjust the nodes y-position
  */
-function relaxLeftToRight(nodesByBreadth, alpha) {
+function relaxLeftToRight(nodesByBreadth, alpha, orient) {
     zrUtil.each(nodesByBreadth, function (nodes) {
         zrUtil.each(nodes, function (node) {
             if (node.inEdges.length) {
-                var y = sum(node.inEdges, weightedSource) / sum(node.inEdges, getEdgeValue);
-                var nodeY = node.getLayout().y + (y - center(node)) * alpha;
-                node.setLayout({y: nodeY}, true);
+                var y = sum(node.inEdges, weightedSource, orient) / sum(node.inEdges, getEdgeValue, orient);
+                if (orient === 'vertical') {
+                    var nodeX = node.getLayout().x + (y - center(node, orient)) * alpha;
+                    node.setLayout({x: nodeX}, true);
+                }
+                else {
+                    var nodeY = node.getLayout().y + (y - center(node, orient)) * alpha;
+                    node.setLayout({y: nodeY}, true);
+                }
             }
         });
     });
 }
 
-function weightedSource(edge) {
-    return center(edge.node1) * edge.getValue();
-}
-
 /**
  * Compute the depth(y-position) of each edge
  *
  * @param {module:echarts/data/Graph~Node} nodes  node of sankey view
  */
-function computeEdgeDepths(nodes) {
+function computeEdgeDepths(nodes, orient) {
     zrUtil.each(nodes, function (node) {
-        node.outEdges.sort(ascendingTargetDepth);
-        node.inEdges.sort(ascendingSourceDepth);
+        if (orient === 'vertical') {
+            node.outEdges.sort(function (a, b) {
+                return a.node2.getLayout().x - b.node2.getLayout().x;
+            });
+            node.inEdges.sort(function (a, b) {
+                return a.node1.getLayout().x - b.node1.getLayout().x;
+            });
+        }
+        else {
+            node.outEdges.sort(function (a, b) {
+                return a.node2.getLayout().y - b.node2.getLayout().y;
+            });
+            node.inEdges.sort(function (a, b) {
+                return a.node1.getLayout().y - b.node1.getLayout().y;
+            });
+        }
     });
     zrUtil.each(nodes, function (node) {
         var sy = 0;
@@ -382,41 +525,4 @@ function computeEdgeDepths(nodes) {
             ty += edge.getLayout().dy;
         });
     });
-}
-
-function ascendingTargetDepth(a, b) {
-    return a.node2.getLayout().y - b.node2.getLayout().y;
-}
-
-function ascendingSourceDepth(a, b) {
-    return a.node1.getLayout().y - b.node1.getLayout().y;
-}
-
-function sum(array, f) {
-    var sum = 0;
-    var len = array.length;
-    var i = -1;
-    while (++i < len) {
-        var value = +f.call(array, array[i], i);
-        if (!isNaN(value)) {
-            sum += value;
-        }
-    }
-    return sum;
-}
-
-function center(node) {
-    return node.getLayout().y + node.getLayout().dy / 2;
-}
-
-function ascendingDepth(a, b) {
-    return a.getLayout().y - b.getLayout().y;
-}
-
-function ascending(a, b) {
-    return a - b;
-}
-
-function getEdgeValue(edge) {
-    return edge.getValue();
 }
\ No newline at end of file
diff --git a/test/sankey-test.html b/test/sankey-test.html
index 171f859..7420c85 100644
--- a/test/sankey-test.html
+++ b/test/sankey-test.html
@@ -117,7 +117,7 @@ under the License.
                     nodes: [
                         {
                             name: 'a'
-                        }, 
+                        },
                         {
                             name: 'b'
                         },
@@ -154,7 +154,7 @@ under the License.
                             source: 'b1',
                             target: 'a1',
                             value: 1
-                        }, 
+                        },
                         {
                             source: 'b1',
                             target: 'c',
@@ -183,10 +183,13 @@ under the License.
                             // focusNodeAdjacency: 'allEdges',
                             data: testData.nodes,
                             links: testData.links,
+                            orient: 'vertical',
+                            // orient: 'horizontal',
+
                             label: {
                                 position: 'left'
                             },
-                            // Used to test when the data is null whether it is work well. 
+                            // Used to test when the data is null whether it is work well.
                             // data: [],
                             // links: [],
                             lineStyle: {
diff --git a/test/singleAxisScales.html b/test/singleAxisScales.html
index d299ec4..63a9895 100644
--- a/test/singleAxisScales.html
+++ b/test/singleAxisScales.html
@@ -3,7 +3,7 @@
 Licensed to the Apache Software Foundation (ASF) under one
 or more contributor license agreements.  See the NOTICE file
 distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
+regarding copyright ownership. The ASF licenses this file
 to you under the Apache License, Version 2.0 (the
 "License"); you may not use this file except in compliance
 with the License.  You may obtain a copy of the License at
@@ -13,7 +13,7 @@ with the License.  You may obtain a copy of the License at
 Unless required by applicable law or agreed to in writing,
 software distributed under the License is distributed on an
 "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
+KIND, either express or implied. See the License for the
 specific language governing permissions and limitations
 under the License.
 -->
diff --git a/test/tree-basic.html b/test/tree-basic.html
index 67dbe1e..63e47c3 100644
--- a/test/tree-basic.html
+++ b/test/tree-basic.html
@@ -94,7 +94,7 @@ under the License.
                                         }
                                     },
 
-                                    expandAndCollapse: true,
+                                    // expandAndCollapse: false,
                                     animationDuration: 550,
                                     animationDurationUpdate: 750
                                 }


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org