antvis / G6

♾ A Graph Visualization Framework in JavaScript.
https://g6.antv.antgroup.com/
MIT License
11.18k stars 1.33k forks source link

脑图如何区分左右数据? #166

Closed ayiaq1 closed 6 years ago

ayiaq1 commented 6 years ago

https://antv.alipay.com/zh-cn/g6/1.x/demo/editor/mind.html const data = { "id": "root", "name": "flare", "children": [{ "name": "analytics", "children": []}, { "name": "animate", "children": []}] }; 如果是多个children平分到左右,我能否手动给属性让数据分布?

TomHuangCN commented 6 years ago

布局算法暂时不支持这么操作

ayiaq1 commented 6 years ago

用了一个笨办法,手动对数据做左右分栏,让左右一级数据相等(如果不等则模拟增加数据),然后对模拟的数据线条做隐藏 // 模拟数据 if (lLen > rLen) { len = lLen - rLen; arr = rightArr; location = 'right'; } else { len = rLen - lLen; arr = leftArr; location = 'left'; } for (let i = 0; i < len; i++) { arr.push({ id: G6.Util.guid(), metadataName: '', location: location }); } // 画线 let afterDrawEdgeFun = function(cfg, group, keyShape) { // 如果是填充数据不做显示 // cfg.model.target == item.id if (cfg.model.target.length < 15) { cfg.size = -1; cfg.color = 'white'; keyShape.__attrs.strokeOpacity = 0; return keyShape; } let end = keyShape.getPoint(1); let arr; // 右边箭头 if (end.x > 100) { arr = [ [end.x - 8, end.y + 4], [end.x, end.y], [end.x - 8, end.y - 4] ]; } else { // 左边箭头 arr = [ [end.x + 8, end.y - 4], [end.x, end.y], [end.x + 8, end.y + 4] ]; } // 绘制起始点圆-下层 if (end) { group.addShape('polygon', { attrs: { points: arr, fill: '#34b8e2' } }); } return keyShape; }; G6.registEdge('arrow', { afterDraw: function(cfg, group, keyShape) { return afterDrawEdgeFun(cfg, group, keyShape); } }, 'smooth');