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/05/02 11:39:48 UTC
[incubator-echarts] 05/05: update the focus node adjacency
interactive
This is an automated email from the ASF dual-hosted git repository.
deqingli pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git
commit ef25a6b3bf4c7ddf886128a8bb24c26aec7a4b54
Author: deqingli <an...@gmail.com>
AuthorDate: Wed May 2 19:16:22 2018 +0800
update the focus node adjacency interactive
---
src/chart/sankey/SankeyView.js | 10 +-
test/sankey-test.html | 317 ++++++++++++++++++++---------------------
test/sankey.html | 1 +
3 files changed, 160 insertions(+), 168 deletions(-)
diff --git a/src/chart/sankey/SankeyView.js b/src/chart/sankey/SankeyView.js
index 5068f31..3bfcf75 100644
--- a/src/chart/sankey/SankeyView.js
+++ b/src/chart/sankey/SankeyView.js
@@ -294,7 +294,7 @@ export default echarts.extendChartView({
var itemModel = data.getItemModel(dataIndex);
var edgeDataIndex = payload.edgeDataIndex;
- if (!dataIndex && !edgeDataIndex) {
+ if (dataIndex == null && edgeDataIndex == null) {
return;
}
var node = graph.getNodeByIndex(dataIndex);
@@ -309,8 +309,8 @@ export default echarts.extendChartView({
if (node) {
fadeInItem(node, nodeOpacityPath);
- var focusNodeAdjacency = itemModel.get('focusNodeAdjacency');
- if (focusNodeAdjacency === 'outEdges') {
+ var focusNodeAdj = itemModel.get('focusNodeAdjacency');
+ if (focusNodeAdj === 'outEdges') {
zrUtil.each(node.outEdges, function (edge) {
if (edge.dataIndex < 0) {
return;
@@ -319,7 +319,7 @@ export default echarts.extendChartView({
fadeInItem(edge.node2, nodeOpacityPath);
});
}
- else if (focusNodeAdjacency === 'inEdges') {
+ else if (focusNodeAdj === 'inEdges') {
zrUtil.each(node.inEdges, function (edge) {
if (edge.dataIndex < 0) {
return;
@@ -328,7 +328,7 @@ export default echarts.extendChartView({
fadeInItem(edge.node1, nodeOpacityPath);
});
}
- else if (focusNodeAdjacency === 'allEdges') {
+ else if (focusNodeAdj === 'allEdges') {
zrUtil.each(node.edges, function (edge) {
if (edge.dataIndex < 0) {
return;
diff --git a/test/sankey-test.html b/test/sankey-test.html
index f7df01c..336c70b 100644
--- a/test/sankey-test.html
+++ b/test/sankey-test.html
@@ -16,178 +16,169 @@
</style>
<div id="main"><div>
<script>
- require([
- 'echarts'
- // 'echarts/chart/sankey',
- // 'echarts/component/tooltip'
- ], function (echarts) {
+ require(['echarts'], function (echarts) {
- var chart = echarts.init(document.getElementById('main'), null, {
+ var chart = echarts.init(document.getElementById('main'), null, {});
- });
+ window.onresize = function () {
+ chart.resize();
+ };
- 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}
+ // ]
+ // };
- // chart.on('click', function (params) {
- // console.log(params, params.data);
- // });
-
- // 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
+ }
+ ]
+ };
- var testData = {
- nodes: [
- {
- name: 'a'
- },
- {
- name: 'b'
- },
- {
- name: 'a1'
+ 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,
+ label: {
+ position: 'left'
},
- {
- 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%',
- data: testData.nodes,
- links: testData.links,
- 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
- }
+ // 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
diff --git a/test/sankey.html b/test/sankey.html
index d8dec76..a2f7332 100644
--- a/test/sankey.html
+++ b/test/sankey.html
@@ -53,6 +53,7 @@
{
type: 'sankey',
layout:'none',
+ focusNodeAdjacency: 'allEdges',
data: data.nodes,
links: data.links,
lineStyle: {
--
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