Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
Five-菜鸟级
echarts
提交
37b25730
E
echarts
项目概览
Five-菜鸟级
/
echarts
与 Fork 源项目一致
从无法访问的项目Fork
通知
1
Star
1
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
1
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
E
echarts
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
1
Issue
1
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
37b25730
编写于
8月 16, 2018
作者:
D
deqingli
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
refactor(sankey): update the method of drawing sankey diagram and add test
上级
1b907924
变更
6
隐藏空白更改
内联
并排
Showing
6 changed file
with
388 addition
and
67 deletion
+388
-67
src/chart/sankey/SankeyView.js
src/chart/sankey/SankeyView.js
+41
-33
src/chart/sankey/sankeyLayout.js
src/chart/sankey/sankeyLayout.js
+20
-31
src/chart/themeRiver/ThemeRiverSeries.js
src/chart/themeRiver/ThemeRiverSeries.js
+2
-1
src/util/nest.js
src/util/nest.js
+120
-0
test/sankey-horizontal.html
test/sankey-horizontal.html
+205
-0
test/sankey-vertical.html
test/sankey-vertical.html
+0
-2
未找到文件。
src/chart/sankey/SankeyView.js
浏览文件 @
37b25730
...
...
@@ -73,34 +73,34 @@ var SankeyShape = graphic.extendShape({
},
buildPath
:
function
(
ctx
,
shape
)
{
var
halfExtent
=
shape
.
extent
/
2
;
var
extent
=
shape
.
extent
;
var
orient
=
shape
.
orient
;
if
(
orient
===
'
vertical
'
)
{
ctx
.
moveTo
(
shape
.
x1
-
halfExtent
,
shape
.
y1
);
ctx
.
moveTo
(
shape
.
x1
,
shape
.
y1
);
ctx
.
bezierCurveTo
(
shape
.
cpx1
-
halfExtent
,
shape
.
cpy1
,
shape
.
cpx2
-
halfExtent
,
shape
.
cpy2
,
shape
.
x2
-
halfExtent
,
shape
.
y2
shape
.
cpx1
,
shape
.
cpy1
,
shape
.
cpx2
,
shape
.
cpy2
,
shape
.
x2
,
shape
.
y2
);
ctx
.
lineTo
(
shape
.
x2
+
halfE
xtent
,
shape
.
y2
);
ctx
.
lineTo
(
shape
.
x2
+
e
xtent
,
shape
.
y2
);
ctx
.
bezierCurveTo
(
shape
.
cpx2
+
halfE
xtent
,
shape
.
cpy2
,
shape
.
cpx1
+
halfE
xtent
,
shape
.
cpy1
,
shape
.
x1
+
halfE
xtent
,
shape
.
y1
shape
.
cpx2
+
e
xtent
,
shape
.
cpy2
,
shape
.
cpx1
+
e
xtent
,
shape
.
cpy1
,
shape
.
x1
+
e
xtent
,
shape
.
y1
);
}
else
{
ctx
.
moveTo
(
shape
.
x1
,
shape
.
y1
-
halfExtent
);
ctx
.
moveTo
(
shape
.
x1
,
shape
.
y1
);
ctx
.
bezierCurveTo
(
shape
.
cpx1
,
shape
.
cpy1
-
halfExtent
,
shape
.
cpx2
,
shape
.
cpy2
-
halfExtent
,
shape
.
x2
,
shape
.
y2
-
halfExtent
shape
.
cpx1
,
shape
.
cpy1
,
shape
.
cpx2
,
shape
.
cpy2
,
shape
.
x2
,
shape
.
y2
);
ctx
.
lineTo
(
shape
.
x2
,
shape
.
y2
+
halfE
xtent
);
ctx
.
lineTo
(
shape
.
x2
,
shape
.
y2
+
e
xtent
);
ctx
.
bezierCurveTo
(
shape
.
cpx2
,
shape
.
cpy2
+
halfE
xtent
,
shape
.
cpx1
,
shape
.
cpy1
+
halfE
xtent
,
shape
.
x1
,
shape
.
y1
+
halfE
xtent
shape
.
cpx2
,
shape
.
cpy2
+
e
xtent
,
shape
.
cpx1
,
shape
.
cpy1
+
e
xtent
,
shape
.
x1
,
shape
.
y1
+
e
xtent
);
}
ctx
.
closePath
();
...
...
@@ -159,29 +159,37 @@ export default echarts.extendChartView({
var
dragX2
=
node2Model
.
get
(
'
localX
'
);
var
dragY2
=
node2Model
.
get
(
'
localY
'
);
var
edgeLayout
=
edge
.
getLayout
();
var
x1
;
var
y1
;
var
x2
;
var
y2
;
var
cpx1
;
var
cpy1
;
var
cpx2
;
var
cpy2
;
curve
.
shape
.
extent
=
Math
.
max
(
1
,
edgeLayout
.
dy
);
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
);
x1
=
(
dragX1
!=
null
?
dragX1
*
width
:
n1Layout
.
x
)
+
edgeLayout
.
sy
;
y1
=
(
dragY1
!=
null
?
dragY1
*
height
:
n1Layout
.
y
)
+
n1Layout
.
dy
;
x2
=
(
dragX2
!=
null
?
dragX2
*
width
:
n2Layout
.
x
)
+
edgeLayout
.
ty
;
y2
=
dragY2
!=
null
?
dragY2
*
height
:
n2Layout
.
y
;
cpx1
=
x1
;
cpy1
=
y1
*
(
1
-
curvature
)
+
y2
*
curvature
;
cpx2
=
x2
;
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
;
x1
=
(
dragX1
!=
null
?
dragX1
*
width
:
n1Layout
.
x
)
+
n1Layout
.
dx
;
y1
=
(
dragY1
!=
null
?
dragY1
*
height
:
n1Layout
.
y
)
+
edgeLayout
.
sy
;
x2
=
dragX2
!=
null
?
dragX2
*
width
:
n2Layout
.
x
;
y2
=
(
dragY2
!=
null
?
dragY2
*
height
:
n2Layout
.
y
)
+
edgeLayout
.
ty
;
cpx1
=
x1
*
(
1
-
curvature
)
+
x2
*
curvature
;
cpy1
=
y1
;
cpx2
=
x1
*
curvature
+
x2
*
(
1
-
curvature
);
cpy2
=
y2
;
}
curve
.
setShape
({
...
...
src/chart/sankey/sankeyLayout.js
浏览文件 @
37b25730
...
...
@@ -23,6 +23,7 @@
*/
import
*
as
layout
from
'
../../util/layout
'
;
import
nest
from
'
../../util/nest
'
;
import
*
as
zrUtil
from
'
zrender/src/core/util
'
;
import
{
__DEV__
}
from
'
../../config
'
;
...
...
@@ -227,38 +228,15 @@ function scaleNodeBreadths(nodes, kx, orient) {
* @param {number} iterations the number of iterations for the algorithm
*/
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
var
nodesByBreadth
=
nest
()
.
key
(
getKeyFunction
(
orient
))
.
sortKeys
(
function
(
a
,
b
)
{
return
a
-
b
;
})
.
entries
(
nodes
)
.
map
(
function
(
d
)
{
return
d
.
values
;
});
});
tempArray
.
sort
(
function
(
a
,
b
)
{
return
a
.
key
-
b
.
key
;
});
var
nodesByBreadth
=
tempArray
.
map
(
function
(
d
)
{
return
d
.
values
;
});
initializeNodeDepth
(
nodes
,
nodesByBreadth
,
edges
,
height
,
width
,
nodeGap
,
orient
);
resolveCollisions
(
nodesByBreadth
,
nodeGap
,
height
,
width
,
orient
);
...
...
@@ -274,6 +252,17 @@ function computeNodeDepths(nodes, edges, height, width, nodeGap, iterations, ori
}
}
function
getKeyFunction
(
orient
)
{
if
(
orient
===
'
vertical
'
)
{
return
function
(
d
)
{
return
d
.
getLayout
().
y
;
};
}
return
function
(
d
)
{
return
d
.
getLayout
().
x
;
};
}
/**
* Compute the original y-position for each node
*
...
...
src/chart/themeRiver/ThemeRiverSeries.js
浏览文件 @
37b25730
...
...
@@ -28,7 +28,7 @@ import {getDimensionTypeByAxis} from '../../data/helper/dimensionHelper';
import
List
from
'
../../data/List
'
;
import
*
as
zrUtil
from
'
zrender/src/core/util
'
;
import
{
encodeHTML
}
from
'
../../util/format
'
;
import
nest
from
'
../../util/
array/
nest
'
;
import
nest
from
'
../../util/nest
'
;
var
DATA_NAME_INDEX
=
2
;
...
...
@@ -48,6 +48,7 @@ var ThemeRiverSeries = SeriesModel.extend({
* @override
*/
init
:
function
(
option
)
{
// eslint-disable-next-line
ThemeRiverSeries
.
superApply
(
this
,
'
init
'
,
arguments
);
// Put this function here is for the sake of consistency of code style.
...
...
src/util/nest.js
0 → 100644
浏览文件 @
37b25730
/*
* 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.
*/
import
*
as
zrUtil
from
'
zrender/src/core/util
'
;
/**
* nest helper used to group by the array.
* can specified the keys and sort the keys.
*/
export
default
function
nest
()
{
var
keysFunction
=
[];
var
sortKeysFunction
=
[];
/**
* map an Array into the mapObject.
* @param {Array} array
* @param {number} depth
*/
function
map
(
array
,
depth
)
{
if
(
depth
>=
keysFunction
.
length
)
{
return
array
;
}
var
i
=
-
1
;
var
n
=
array
.
length
;
var
keyFunction
=
keysFunction
[
depth
++
];
var
mapObject
=
{};
var
valuesByKey
=
{};
while
(
++
i
<
n
)
{
var
keyValue
=
keyFunction
(
array
[
i
]);
var
values
=
valuesByKey
[
keyValue
];
if
(
values
)
{
values
.
push
(
array
[
i
]);
}
else
{
valuesByKey
[
keyValue
]
=
[
array
[
i
]];
}
}
zrUtil
.
each
(
valuesByKey
,
function
(
value
,
key
)
{
mapObject
[
key
]
=
map
(
value
,
depth
);
});
return
mapObject
;
}
/**
* transform the Map Object to multidimensional Array
* @param {Object} map
* @param {number} depth
*/
function
entriesMap
(
mapObject
,
depth
)
{
if
(
depth
>=
keysFunction
.
length
)
{
return
mapObject
;
}
var
array
=
[];
var
sortKeyFunction
=
sortKeysFunction
[
depth
++
];
zrUtil
.
each
(
mapObject
,
function
(
value
,
key
)
{
array
.
push
({
key
:
key
,
values
:
entriesMap
(
value
,
depth
)
});
});
if
(
sortKeyFunction
)
{
return
array
.
sort
(
function
(
a
,
b
)
{
return
sortKeyFunction
(
a
.
key
,
b
.
key
);
});
}
return
array
;
}
return
{
/**
* specified the key to groupby the arrays.
* users can specified one more keys.
* @param {Function} d
*/
key
:
function
(
d
)
{
keysFunction
.
push
(
d
);
return
this
;
},
/**
* specified the comparator to sort the keys
* @param {Function} order
*/
sortKeys
:
function
(
order
)
{
sortKeysFunction
[
keysFunction
.
length
-
1
]
=
order
;
return
this
;
},
/**
* the array to be grouped by.
* @param {Array} array
*/
entries
:
function
(
array
)
{
return
entriesMap
(
map
(
array
,
0
),
0
);
}
};
}
\ No newline at end of file
test/sankey-horizontal.html
0 → 100644
浏览文件 @
37b25730
<!--
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
'
],
function
(
echarts
)
{
var
chart
=
echarts
.
init
(
document
.
getElementById
(
'
main
'
),
null
,
{});
window
.
onresize
=
function
()
{
chart
.
resize
();
};
// var data = {
// nodes: [
// {name: 'Brazil'},
// {name: 'Canada'},
// {name: 'Mexico'},
// {name: 'USA'},
// {name: 'Portugal'},
// {name: 'France'},
// {name: 'Spain'},
// {name: 'England'},
// {name: 'Angola'},
// {name: 'Senegal'},
// {name: 'Morocco'},
// {name: 'South Africa'},
// {name: 'Mali'},
// {name: 'China'},
// {name: 'India'},
// {name: 'Japan'}
// ],
// links: [
// {source: 'Brazil', target: 'Portugal', value: 5},
// {source: 'Brazil', target: 'France', value: 1},
// {source: 'Brazil', target: 'Spain', value: 1},
// {source: 'Brazil', target: 'England', value: 1},
// {source: 'Canada', target: 'Portugal', value: 1},
// {source: 'Canada', target: 'France', value: 5},
// {source: 'Canada', target: 'England', value: 1},
// {source: 'Mexico', target: 'Portugal', value: 1},
// {source: 'Mexico', target: 'France', value: 1},
// {source: 'Mexico', target: 'Spain', value: 5},
// {source: 'Mexico', target: 'England', value: 1},
// {source: 'USA', target: 'Portugal', value: 1},
// {source: 'USA', target: 'France', value: 1},
// {source: 'USA', target: 'Spain', value: 1},
// {source: 'USA', target: 'England', value: 5},
// {source: 'Portugal', target: 'Angola', value: 2},
// {source: 'Portugal', target: 'Senegal', value: 1},
// {source:'Portugal', target: 'Morocco', value: 1},
// {source: 'Portugal', target: 'South Africa', value: 3},
// {source: 'France', target: 'Angola', value: 1},
// {source: 'France', target: 'Senegal', value: 3},
// {source: 'France', target: 'Mali', value: 3},
// {source: 'France', target: 'Morocco', value: 3},
// {source: 'France', target: 'South Africa', value: 1},
// {source: 'Spain', target: 'Senegal', value: 1},
// {source: 'Spain', target: 'Morocco', value: 3},
// {source: 'Spain', target: 'South Africa', value: 1},
// {source: 'England', target: 'Angola', value: 1},
// {source: 'England', target: 'Senegal', value: 1},
// {source: 'England', target: 'Morocco', value: 2},
// {source: 'England', target: 'South Africa', value: 7},
// {source: 'South Africa', target: 'China', value: 5},
// {source: 'South Africa', target: 'India', value: 1},
// {source: 'South Africa', target: 'Japan', value: 3},
// {source: 'Angola', target: 'China', value: 5},
// {source: 'Angola', target: 'India', value: 1},
// {source: 'Angola', target: 'Japan', value: 3},
// {source: 'Senegal', target: 'China', value: 5},
// {source: 'Senegal', target: 'India', value: 1},
// {source: 'Senegal', target: 'Japan', value: 3},
// {source: 'Mali', target: 'China', value: 5},
// {source: 'Mali', target: 'India', value: 1},
// {source: 'Mali', target: 'Japan', value: 3},
// {source: 'Morocco', target: 'China', value: 5},
// {source: 'Morocco', target: 'India', value: 1},
// {source: 'Morocco', target: 'Japan', value: 3}
// ]
// };
var
testData
=
{
nodes
:
[
{
name
:
'
a
'
},
{
name
:
'
b
'
},
{
name
:
'
a1
'
},
{
name
:
'
b1
'
},
{
name
:
'
c
'
},
{
name
:
'
e
'
}
],
links
:
[
{
source
:
'
a
'
,
target
:
'
a1
'
,
value
:
5
},
{
source
:
'
e
'
,
target
:
'
b
'
,
value
:
3
},
{
source
:
'
a
'
,
target
:
'
b1
'
,
value
:
3
},
{
source
:
'
b1
'
,
target
:
'
a1
'
,
value
:
1
},
{
source
:
'
b1
'
,
target
:
'
c
'
,
value
:
2
},
{
source
:
'
b
'
,
target
:
'
c
'
,
value
:
1
}
]
};
chart
.
setOption
({
color
:
[
'
#67001f
'
,
'
#b2182b
'
,
'
#d6604d
'
,
'
#f4a582
'
,
'
#fddbc7
'
,
'
#d1e5f0
'
,
'
#92c5de
'
,
'
#4393c3
'
,
'
#2166ac
'
,
'
#053061
'
],
tooltip
:
{
trigger
:
'
item
'
,
triggerOn
:
'
mousemove
'
},
animation
:
false
,
series
:
[
{
type
:
'
sankey
'
,
layout
:
'
none
'
,
bottom
:
'
10%
'
,
// focusNodeAdjacency: 'allEdges',
data
:
testData
.
nodes
,
links
:
testData
.
links
,
orient
:
'
horizontal
'
,
label
:
{
position
:
'
left
'
},
// Used to test when the data is null whether it is work well.
// data: [],
// links: [],
lineStyle
:
{
normal
:
{
color
:
'
source
'
,
curveness
:
0.5
}
}
}
]
});
});
</script>
</body>
</html>
\ No newline at end of file
test/sankey-
test
.html
→
test/sankey-
vertical
.html
浏览文件 @
37b25730
...
...
@@ -184,8 +184,6 @@ under the License.
data
:
testData
.
nodes
,
links
:
testData
.
links
,
orient
:
'
vertical
'
,
// orient: 'horizontal',
label
:
{
position
:
'
left
'
},
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录