You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by za...@apache.org on 2020/09/15 02:52:45 UTC
[incubator-echarts] branch fix-12706 created (now 8b78e46)
This is an automated email from the ASF dual-hosted git repository.
zakwu pushed a change to branch fix-12706
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git.
at 8b78e46 fix(tree):delete the edge when all the children nodes are deleted
This branch includes the following new commits:
new 8b78e46 fix(tree):delete the edge when all the children nodes are deleted
The 1 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[incubator-echarts] 01/01: fix(tree):delete the edge when all the
children nodes are deleted
Posted by za...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
zakwu pushed a commit to branch fix-12706
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git
commit 8b78e46f8f4827ffb428fc1ad9155d32fb549d51
Author: zakwu <12...@qq.com>
AuthorDate: Tue Sep 15 10:52:27 2020 +0800
fix(tree):delete the edge when all the children nodes are deleted
---
src/chart/tree/TreeView.ts | 27 ++---
src/data/Tree.ts | 4 +-
test/tree-basic.html | 238 ++++++++++++++++++++++++++++++++++++++++-----
3 files changed, 234 insertions(+), 35 deletions(-)
diff --git a/src/chart/tree/TreeView.ts b/src/chart/tree/TreeView.ts
index fe65c25..c91fbd6 100644
--- a/src/chart/tree/TreeView.ts
+++ b/src/chart/tree/TreeView.ts
@@ -529,6 +529,7 @@ function drawEdge(
const edgeForkPosition = seriesModel.get('edgeForkPosition');
const lineStyle = itemModel.getModel('lineStyle').getLineStyle();
let edge = symbolEl.__edge;
+
if (edgeShape === 'curve') {
if (node.parentNode && node.parentNode !== virtualRoot) {
if (!edge) {
@@ -576,7 +577,6 @@ function drawEdge(
}
}
}
-
if (edge) {
edge.useStyle(zrUtil.defaults({
strokeNoScale: true, fill: null
@@ -619,13 +619,22 @@ function removeNode(
const sourceSymbolEl = data.getItemGraphicEl(source.dataIndex) as TreeSymbol;
const sourceEdge = sourceSymbolEl.__edge;
+ // count the deleted child node, #12706
+ const symbolElEcData = getECData(symbolEl);
+ if (source.isExpand === true && source.children) {
+ source.children.forEach(t => {
+ if (t.dataIndex === symbolElEcData.dataIndex) {
+ source.removeNodeCnt += 1
+ }
+ });
+ }
+
// 1. when expand the sub tree, delete the children node should delete the edge of
// the source at the same time. because the polyline edge shape is only owned by the source.
- // 2.when the node is the only children of the source, delete the node should delete the edge of
+ // 2.when delete all children of the source, should delete the edge of
// the source at the same time. the same reason as above.
const edge = symbolEl.__edge
- || ((source.isExpand === false || source.children.length === 1) ? sourceEdge : undefined);
-
+ || ((source.removeNodeCnt === source.children.length || source.isExpand === false) ? sourceEdge : undefined);
const edgeShape = seriesModel.get('edgeShape');
const layoutOpt = seriesModel.get('layout');
const orient = seriesModel.get('orient');
@@ -641,9 +650,6 @@ function removeNode(
sourceLayout,
sourceLayout
),
- style: {
- opacity: 0
- }
}, seriesModel, function () {
group.remove(edge);
});
@@ -654,13 +660,12 @@ function removeNode(
parentPoint: [sourceLayout.x, sourceLayout.y],
childPoints: [[sourceLayout.x, sourceLayout.y]]
},
- style: {
- opacity: 0
- }
}, seriesModel, function () {
group.remove(edge);
});
}
+ // clean removeNodeCnt
+ source.removeNodeCnt = 0;
}
}
@@ -736,4 +741,4 @@ function getEdgeShape(
ChartView.registerClass(TreeView);
-export default TreeView;
\ No newline at end of file
+export default TreeView;
diff --git a/src/data/Tree.ts b/src/data/Tree.ts
index a42591a..af30607 100644
--- a/src/data/Tree.ts
+++ b/src/data/Tree.ts
@@ -67,6 +67,8 @@ export class TreeNode {
isExpand: boolean = false;
+ removeNodeCnt: number = 0;
+
readonly hostTree: Tree<Model, any, any>; // TODO: TYPE TreeNode use generic?
constructor(name: string, hostTree: Tree<Model, any, any>) {
@@ -482,4 +484,4 @@ function addChild(child: TreeNode, node: TreeNode) {
child.parentNode = node;
}
-export default Tree;
\ No newline at end of file
+export default Tree;
diff --git a/test/tree-basic.html b/test/tree-basic.html
index bb8a4b7..53e2baf 100644
--- a/test/tree-basic.html
+++ b/test/tree-basic.html
@@ -28,29 +28,30 @@ under the License.
</head>
<body>
<style>
- html, body, #main {
+ html, body, .main {
width: 100%;
padding: 0;
margin: 0;
height: 100%;
}
</style>
- <div id="main"></div>
+ <div id="main" class="main"></div>
+ <div id="main1" class="main"></div>
<script>
require([
'echarts'
// 'echarts/chart/tree',
// 'echarts/component/tooltip'
- ], function (echarts) {
- var chart = echarts.init(document.getElementById('main'), null, {
+ ], function (echarts) {
+ var chart = echarts.init(document.getElementById('main'), null, {
- });
+ });
- window.onresize = function () {
- chart.resize();
- };
+ window.onresize = function () {
+ chart.resize();
+ };
- $.getJSON('./data/flare.json')
+ $.getJSON('./data/flare.json')
.done(function (data) {
echarts.util.each(data.children, function (datum, index) {
@@ -58,7 +59,6 @@ under the License.
});
chart.setOption({
-
tooltip: {
trigger: 'item',
triggerOn: 'mousemove'
@@ -70,28 +70,23 @@ under the License.
id: '3',
data: [data],
-
top: '1%',
left: '7%',
bottom: '1%',
right: '20%',
roam: true,
-
symbolSize: 7,
-
- // initialTreeDepth: -1,
-
label: {
- position: 'left',
- verticalAlign: 'middle',
- align: 'right'
+ position: 'left',
+ verticalAlign: 'middle',
+ align: 'right'
},
leaves: {
label: {
- position: 'right',
- verticalAlign: 'middle',
- align: 'left'
+ position: 'right',
+ verticalAlign: 'middle',
+ align: 'left'
}
},
@@ -113,9 +108,206 @@ under the License.
}]
}, false);
}, 1000);
+ });
+ });
+ </script>
+ <script>
+ require([
+ 'echarts'
+ // 'echarts/chart/tree',
+ // 'echarts/component/tooltip'
+ ], function (echarts) {
+ var chart = echarts.init(document.getElementById('main1'), null, {});
+
+ var data = {
+ "name": "flare",
+ "children": [
+ {
+ "name": "data",
+ "children": [
+ {
+ "name": "converters",
+ "children": [
+ {"name": "Converters", "value": 721},
+ {"name": "DelimitedTextConverter", "value": 4294}
+ ]
+ },
+ {
+ "name": "DataUtil",
+ "value": 3322
+ }
+ ]
+ },
+ {
+ "name": "display",
+ "children": [
+ {"name": "DirtySprite", "value": 8833},
+ {"name": "LineSprite", "value": 1732},
+ {"name": "RectSprite", "value": 3623}
+ ]
+ },
+ {
+ "name": "flex",
+ "children": [
+ {"name": "FlareVis", "value": 4116}
+ ]
+ },
+ {
+ "name": "query",
+ "children": [
+ {"name": "AggregateExpression", "value": 1616},
+ {"name": "And", "value": 1027},
+ {"name": "Arithmetic", "value": 3891},
+ {"name": "Average", "value": 891},
+ {"name": "BinaryExpression", "value": 2893},
+ {"name": "Comparison", "value": 5103},
+ {"name": "CompositeExpression", "value": 3677},
+ {"name": "Count", "value": 781},
+ {"name": "DateUtil", "value": 4141},
+ {"name": "Distinct", "value": 933},
+ {"name": "Expression", "value": 5130},
+ {"name": "ExpressionIterator", "value": 3617},
+ {"name": "Fn", "value": 3240},
+ {"name": "If", "value": 2732},
+ {"name": "IsA", "value": 2039},
+ {"name": "Literal", "value": 1214},
+ {"name": "Match", "value": 3748},
+ {"name": "Maximum", "value": 843},
+ {
+ "name": "methods",
+ "children": [
+ {"name": "add", "value": 593},
+ {"name": "and", "value": 330},
+ {"name": "average", "value": 287},
+ {"name": "count", "value": 277},
+ {"name": "distinct", "value": 292},
+ {"name": "div", "value": 595},
+ {"name": "eq", "value": 594},
+ {"name": "fn", "value": 460},
+ {"name": "gt", "value": 603},
+ {"name": "gte", "value": 625},
+ {"name": "iff", "value": 748},
+ {"name": "isa", "value": 461},
+ {"name": "lt", "value": 597},
+ {"name": "lte", "value": 619},
+ {"name": "max", "value": 283},
+ {"name": "min", "value": 283},
+ {"name": "mod", "value": 591},
+ {"name": "mul", "value": 603},
+ {"name": "neq", "value": 599},
+ {"name": "not", "value": 386},
+ {"name": "or", "value": 323},
+ {"name": "orderby", "value": 307},
+ {"name": "range", "value": 772},
+ {"name": "select", "value": 296},
+ {"name": "stddev", "value": 363},
+ {"name": "sub", "value": 600},
+ {"name": "sum", "value": 280},
+ {"name": "update", "value": 307},
+ {"name": "variance", "value": 335},
+ {"name": "where", "value": 299},
+ {"name": "xor", "value": 354},
+ {"name": "x_x", "value": 264}
+ ]
+ },
+ {"name": "Minimum", "value": 843},
+ {"name": "Not", "value": 1554},
+ {"name": "Or", "value": 970},
+ {"name": "Query", "value": 13896},
+ {"name": "Range", "value": 1594},
+ {"name": "StringUtil", "value": 4130},
+ {"name": "Sum", "value": 791},
+ {"name": "Variable", "value": 1124},
+ {"name": "Variance", "value": 1876},
+ {"name": "Xor", "value": 1101}
+ ]
+ },
+ {
+ "name": "scale",
+ "children": [
+ {"name": "IScaleMap", "value": 2105},
+ {"name": "LinearScale", "value": 1316},
+ {"name": "LogScale", "value": 3151},
+ {"name": "OrdinalScale", "value": 3770},
+ {"name": "QuantileScale", "value": 2435},
+ {"name": "QuantitativeScale", "value": 4839},
+ {"name": "RootScale", "value": 1756},
+ {"name": "Scale", "value": 4268},
+ {"name": "ScaleType", "value": 1821},
+ {"name": "TimeScale", "value": 5833}
+ ]
+ }]
+ };
+
+ var option = {
+ tooltip: {
+ trigger: 'item',
+ triggerOn: 'mousemove'
+ },
+ series:[
+ {
+ type: 'tree',
+ id: 0,
+ name: 'tree1',
+ data: [data],
+
+ top: '10%',
+ left: '8%',
+ bottom: '22%',
+ right: '20%',
+
+ symbolSize: 7,
+
+ edgeShape: 'polyline',
+ edgeForkPosition: '63%',
+ initialTreeDepth: 3,
+
+ lineStyle: {
+ width: 4
+ },
+
+ label: {
+ backgroundColor: '#fff',
+ position: 'left',
+ verticalAlign: 'middle',
+ align: 'right'
+ },
+
+ leaves: {
+ label: {
+ position: 'right',
+ verticalAlign: 'middle',
+ align: 'left'
+ }
+ },
+
+ expandAndCollapse: true,
+ animationDuration: 550,
+ animationDurationUpdate: 750
+ }
+ ]
+ };
+
+ chart.setOption(option)
+ setTimeout(function () {
+ data.children[0].children[0].children.pop();
+ chart.setOption({
+ series: [{
+ data: [data]
+ }]
});
- });
+ }, 1000);
+
+ setTimeout(function () {
+ data.children[1].children = [];
+ chart.setOption({
+ series: [{
+ data: [data]
+ }]
+ });
+ }, 3000);
+ })
</script>
</body>
-</html>
\ No newline at end of file
+</html>
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org