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/04/20 12:08:47 UTC
[incubator-echarts] branch master updated: add drag node
interaction for 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
The following commit(s) were added to refs/heads/master by this push:
new 08e25b7 add drag node interaction for sankey diagram
new 4ed9d69 Merge branch 'master' of https://github.com/apache/incubator-echarts
08e25b7 is described below
commit 08e25b78a322051774c8d6445bf6985d20adad96
Author: deqingli <an...@gmail.com>
AuthorDate: Fri Apr 20 20:07:22 2018 +0800
add drag node interaction for sankey diagram
---
src/chart/sankey.js | 1 +
src/chart/sankey/SankeySeries.js | 9 ++++++++
src/chart/sankey/SankeyView.js | 48 +++++++++++++++++++++++++++++++---------
src/chart/sankey/sankeyAction.js | 12 ++++++++++
test/sankey-test.html | 9 ++++----
test/sankey.html | 2 +-
6 files changed, 66 insertions(+), 15 deletions(-)
diff --git a/src/chart/sankey.js b/src/chart/sankey.js
index 736be71..a702303 100644
--- a/src/chart/sankey.js
+++ b/src/chart/sankey.js
@@ -2,6 +2,7 @@ import * as echarts from '../echarts';
import './sankey/SankeySeries';
import './sankey/SankeyView';
+import './sankey/sankeyAction';
import sankeyLayout from './sankey/sankeyLayout';
import sankeyVisual from './sankey/sankeyVisual';
diff --git a/src/chart/sankey/SankeySeries.js b/src/chart/sankey/SankeySeries.js
index 9a4e798..de4486e 100644
--- a/src/chart/sankey/SankeySeries.js
+++ b/src/chart/sankey/SankeySeries.js
@@ -28,6 +28,12 @@ var SankeySeries = SeriesModel.extend({
}
},
+ setNodePosition: function (dataIndex, localPosition) {
+ var dataItem = this.option.data[dataIndex];
+ dataItem.localX = localPosition[0];
+ dataItem.localY = localPosition[1];
+ },
+
/**
* Return the graphic data structure
*
@@ -84,6 +90,9 @@ var SankeySeries = SeriesModel.extend({
// the vertical distance between two nodes
nodeGap: 8,
+ // control if the node can move or not
+ draggable: true,
+
// the number of iterations to change the position of the node
layoutIterations: 32,
diff --git a/src/chart/sankey/SankeyView.js b/src/chart/sankey/SankeyView.js
index 639a424..873bfb2 100644
--- a/src/chart/sankey/SankeyView.js
+++ b/src/chart/sankey/SankeyView.js
@@ -63,19 +63,24 @@ export default echarts.extendChartView({
curve.dataIndex = edge.dataIndex;
curve.seriesIndex = seriesModel.seriesIndex;
curve.dataType = 'edge';
-
var lineStyleModel = edge.getModel('lineStyle');
var curvature = lineStyleModel.get('curveness');
var n1Layout = edge.node1.getLayout();
+ var node1Model =edge.node1.getModel();
+ var dragX1 = node1Model.get('localX');
+ var dragY1 = node1Model.get('localY');
var n2Layout = edge.node2.getLayout();
+ var node2Model = edge.node2.getModel();
+ var dragX2 = node2Model.get('localX');
+ var dragY2 = node2Model.get('localY');
var edgeLayout = edge.getLayout();
curve.shape.extent = Math.max(1, edgeLayout.dy);
- var x1 = n1Layout.x + n1Layout.dx;
- var y1 = n1Layout.y + edgeLayout.sy + edgeLayout.dy / 2;
- var x2 = n2Layout.x;
- var y2 = n2Layout.y + edgeLayout.ty + edgeLayout.dy / 2;
+ var x1 = (dragX1 != null ? dragX1 : n1Layout.x) + n1Layout.dx;
+ var y1 = (dragY1 != null ? dragY1 : n1Layout.y) + edgeLayout.sy + edgeLayout.dy / 2;
+ var x2 = dragX2 != null ? dragX2 : n2Layout.x;
+ var y2 = (dragY2 != null ? dragY2 : n2Layout.y) + edgeLayout.ty + edgeLayout.dy / 2;
var cpx1 = x1 * (1 - curvature) + x2 * curvature;
var cpy1 = y1;
var cpx2 = x1 * curvature + x2 * (1 - curvature);
@@ -110,19 +115,21 @@ export default echarts.extendChartView({
edgeData.setItemGraphicEl(edge.dataIndex, curve);
});
- // generate a rect for each node
+ // generate a rect for each node
graph.eachNode(function (node) {
var layout = node.getLayout();
var itemModel = node.getModel();
+ var dragX = itemModel.get('localX');
+ var dragY = itemModel.get('localY');
var labelModel = itemModel.getModel('label');
var labelHoverModel = itemModel.getModel('emphasis.label');
var rect = new graphic.Rect({
shape: {
- x: layout.x,
- y: layout.y,
- width: node.getLayout().dx,
- height: node.getLayout().dy
+ x: dragX != null ? dragX : layout.x,
+ y: dragY != null ? dragY : layout.y,
+ width: layout.dx,
+ height: layout.dy
},
style: itemModel.getModel('itemStyle').getItemStyle()
});
@@ -150,6 +157,27 @@ export default echarts.extendChartView({
rect.dataType = 'node';
});
+ var draggable = seriesModel.get('draggable');
+ if (draggable) {
+ nodeData.eachItemGraphicEl(function (el, dataIndex) {
+ el.drift = function (dx, dy) {
+ this.shape.x += dx;
+ this.shape.y += dy;
+ this.dirty();
+ api.dispatchAction({
+ type: 'dragNode',
+ seriesId: seriesModel.id,
+ dataIndex: nodeData.getRawIndex(dataIndex),
+ localX: this.shape.x,
+ localY: this.shape.y
+ });
+ };
+
+ el.draggable = true;
+ el.cursor = 'move';
+ });
+ }
+
if (!this._data && seriesModel.get('animation')) {
group.setClipPath(createGridClipShape(group.getBoundingRect(), seriesModel, function () {
group.removeClipPath();
diff --git a/src/chart/sankey/sankeyAction.js b/src/chart/sankey/sankeyAction.js
new file mode 100644
index 0000000..ccfa2ea
--- /dev/null
+++ b/src/chart/sankey/sankeyAction.js
@@ -0,0 +1,12 @@
+import * as echarts from '../../echarts';
+
+echarts.registerAction({
+ type: 'dragNode',
+ event: 'dragNode',
+ // here can only use 'update' now, other value is not support in echarts.
+ update: 'update'
+}, function (payload, ecModel) {
+ ecModel.eachComponent({mainType: 'series', subType: 'sankey', query: payload}, function (seriesModel) {
+ seriesModel.setNodePosition(payload.dataIndex, [payload.localX, payload.localY]);
+ });
+});
diff --git a/test/sankey-test.html b/test/sankey-test.html
index aa17c35..a609d96 100644
--- a/test/sankey-test.html
+++ b/test/sankey-test.html
@@ -10,7 +10,7 @@
<style>
html, body, #main {
width: 100%;
- height: 90%;
+ height: 100%;
/*border: 1px solid #000;*/
}
</style>
@@ -30,9 +30,9 @@
chart.resize();
};
- chart.on('click', function (params) {
- console.log(params, params.data);
- });
+ // chart.on('click', function (params) {
+ // console.log(params, params.data);
+ // });
// var data = {
// nodes: [
@@ -169,6 +169,7 @@
{
type: 'sankey',
layout:'none',
+ bottom: '10%',
data: testData.nodes,
links: testData.links,
// Used to test when the data is null whether it is work well.
diff --git a/test/sankey.html b/test/sankey.html
index d5e6a54..d8dec76 100644
--- a/test/sankey.html
+++ b/test/sankey.html
@@ -10,7 +10,7 @@
<style>
html, body, #main {
width: 100%;
- height: 90%;
+ height: 100%;
/*border: 1px solid #000;*/
}
</style>
--
To stop receiving notification emails like this one, please contact
deqingli@apache.org.
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org