Skip to content

I
incubator-echarts

半栈学徒 / incubator-echarts
与 Fork 源项目一致

从无法访问的项目Fork

通知 5
Star 0
Fork 0
I
incubator-echarts

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 8b78e46f 编写于 作者: Z zakwu
浏览文件
操作

fix(tree):delete the edge when all the children nodes are deleted

上级 99ab1d7a
隐藏空白更改
内联 并排
Showing with 234 addition and 35 deletion
src/chart/tree/TreeView.ts
浏览文件 @ 8b78e46f
......@@ -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;
src/data/Tree.ts
浏览文件 @ 8b78e46f
......@@ -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;
test/tree-basic.html
浏览文件 @ 8b78e46f
......@@ -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>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或