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/10/15 10:21:13 UTC
[incubator-echarts] 01/03: feat(sankey): add left node align in
sankey diagram
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
commit f80afbed6e59031b72902865b19aa1999669947b
Author: deqingli <an...@gmail.com>
AuthorDate: Mon Oct 15 13:32:51 2018 +0800
feat(sankey): add left node align in sankey diagram
---
src/chart/sankey/SankeySeries.js | 5 ++
src/chart/sankey/sankeyLayout.js | 14 +++--
src/chart/themeRiver/ThemeRiverSeries.js | 2 +-
test/sankey-nodeAlign-left.html | 93 ++++++++++++++++++++++++++++++++
4 files changed, 108 insertions(+), 6 deletions(-)
diff --git a/src/chart/sankey/SankeySeries.js b/src/chart/sankey/SankeySeries.js
index bb3b33e..829737f 100644
--- a/src/chart/sankey/SankeySeries.js
+++ b/src/chart/sankey/SankeySeries.js
@@ -143,6 +143,11 @@ var SankeySeries = SeriesModel.extend({
fontSize: 12
},
+ levels: [],
+
+ // Value can be 'left', 'right'
+ nodeAlign: 'justify',
+
itemStyle: {
borderWidth: 1,
borderColor: '#333'
diff --git a/src/chart/sankey/sankeyLayout.js b/src/chart/sankey/sankeyLayout.js
index ef77ff0..16c88eb 100644
--- a/src/chart/sankey/sankeyLayout.js
+++ b/src/chart/sankey/sankeyLayout.js
@@ -57,7 +57,9 @@ export default function (ecModel, api, payload) {
var orient = seriesModel.get('orient');
- layoutSankey(nodes, edges, nodeWidth, nodeGap, width, height, iterations, orient);
+ var nodeAlign = seriesModel.get('nodeAlign');
+
+ layoutSankey(nodes, edges, nodeWidth, nodeGap, width, height, iterations, orient, nodeAlign);
});
}
@@ -77,8 +79,8 @@ function getViewRect(seriesModel, api) {
);
}
-function layoutSankey(nodes, edges, nodeWidth, nodeGap, width, height, iterations, orient) {
- computeNodeBreadths(nodes, edges, nodeWidth, width, height, orient);
+function layoutSankey(nodes, edges, nodeWidth, nodeGap, width, height, iterations, orient, nodeAlign) {
+ computeNodeBreadths(nodes, edges, nodeWidth, width, height, orient, nodeAlign);
computeNodeDepths(nodes, edges, height, width, nodeGap, iterations, orient);
computeEdgeDepths(nodes, orient);
}
@@ -107,7 +109,7 @@ 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, height, orient) {
+function computeNodeBreadths(nodes, edges, nodeWidth, width, height, orient, nodeAlign) {
// Used to mark whether the edge is deleted. if it is deleted,
// the value is 0, otherwise it is 1.
var remainEdges = [];
@@ -168,7 +170,9 @@ function computeNodeBreadths(nodes, edges, nodeWidth, width, height, orient) {
}
}
- moveSinksRight(nodes, x, orient);
+ if (nodeAlign === 'justify' || nodeAlign === 'right') {
+ moveSinksRight(nodes, x, orient);
+ }
if (orient === 'vertical') {
kx = (height - nodeWidth) / (x - 1);
diff --git a/src/chart/themeRiver/ThemeRiverSeries.js b/src/chart/themeRiver/ThemeRiverSeries.js
index 6d00345..3d47bfc 100644
--- a/src/chart/themeRiver/ThemeRiverSeries.js
+++ b/src/chart/themeRiver/ThemeRiverSeries.js
@@ -228,7 +228,7 @@ var ThemeRiverSeries = SeriesModel.extend({
/**
* Get data indices for show tooltip content
- *
+
* @param {Array.<string>|string} dim single coordinate dimension
* @param {number} value axis value
* @param {module:echarts/coord/single/SingleAxis} baseAxis single Axis used
diff --git a/test/sankey-nodeAlign-left.html b/test/sankey-nodeAlign-left.html
new file mode 100644
index 0000000..dc55e9b
--- /dev/null
+++ b/test/sankey-nodeAlign-left.html
@@ -0,0 +1,93 @@
+
+
+<!--
+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
+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
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+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
+specific language governing permissions and limitations
+under the License.
+-->
+
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
+ <script src="lib/esl.js"></script>
+ <script src="lib/config.js"></script>
+ <script src="lib/jquery.min.js"></script>
+ </head>
+ <body>
+ <style>
+ html, body, #main {
+ width: 100%;
+ height: 100%;
+ /*border: 1px solid #000;*/
+ }
+ </style>
+ <div id="main"><div>
+ <script>
+ require([
+ 'echarts'
+ // 'echarts/chart/sankey',
+ // 'echarts/component/tooltip'
+ ], function (echarts) {
+
+ var chart = echarts.init(document.getElementById('main'), null, {
+
+ });
+
+ window.onresize = function () {
+ chart.resize();
+ };
+
+ chart.on('click', function (params) {
+ console.log(params, params.data);
+ });
+
+ $.getJSON('./data/energy.json')
+ .done(function(data) {
+
+ data.nodes[0].itemStyle = {
+ normal: {
+ color: 'red'
+ }
+ };
+ chart.setOption({
+ tooltip: {
+ trigger: 'item',
+ triggerOn: 'mousemove'
+ },
+ animation: false,
+ series: [
+ {
+ type: 'sankey',
+ layout:'none',
+ focusNodeAdjacency: true,
+ nodeAlign: 'left',
+ data: data.nodes,
+ links: data.links,
+ lineStyle: {
+ normal: {
+ color: 'source',
+ curveness: 0.5
+ }
+ }
+ }
+ ]
+ });
+ });
+ });
+ </script>
+ </body>
+</html>
\ No newline at end of file
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org