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 <123537...@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-unsubscr...@echarts.apache.org For additional commands, e-mail: commits-h...@echarts.apache.org