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:46 UTC
[incubator-echarts] 01/01: fix(tree):delete the edge when all the
children nodes are deleted
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