html5 动态加载数据,动态加载数据

源码复制成功复制失败全屏 复制 运行

动态加载数据

/**

* 该案例演示，当点击叶子节点时，如何向树图中动态添加数据。

* 主要演示addChild和refreshLayout的用法。

*/

var graph = new G6.TreeGraph({

container: 'mountNode',

width: 500,

height: 500,

pixelRatio: 2,

renderer: 'svg',

modes: {

default: ['collapse-expand', 'drag-canvas']

},

fitView: true,

layout: {

type: 'compactBox',

direction: 'LR',

defalutPosition: [],

getId: function getId(d) {

return d.id;

},

getHeight: function getHeight() {

return 16;

},

getWidth: function getWidth() {

return 16;

},

getVGap: function getVGap() {

return 50;

},

getHGap: function getHGap() {

return 100;

}

}

});

graph.node(function(node) {

return {

size: 16,

anchorPoints: [[0, 0.5], [1, 0.5]],

style: {

fill: '#40a9ff',

stroke: '#096dd9'

},

label: node.id,

labelCfg: {

position: node.children && node.children.length > 0 ? 'left' : 'right'

}

};

});

graph.edge(function() {

return {

shape: 'cubic-horizontal',

color: '#A3B1BF'

};

});

var data = {

isRoot: true,

id: 'Root',

style: {

fill: 'red'

},

children: [{

id: 'SubTreeNode1',

raw: {},

children: [{

id: 'SubTreeNode1.1'

}, {

id: 'SubTreeNode1.2',

children: [{

id: 'SubTreeNode1.2.1'

}, {

id: 'SubTreeNode1.2.2'

}, {

id: 'SubTreeNode1.2.3'

}]

}]

}, {

id: 'SubTreeNode2',

children: [{

id: 'SubTreeNode2.1'

}]

}, {

id: 'SubTreeNode3',

children: [{

id: 'SubTreeNode3.1'

}, {

id: 'SubTreeNode3.2'

}, {

id: 'SubTreeNode3.3'

}]

}, {

id: 'SubTreeNode4'

}, {

id: 'SubTreeNode5'

}, {

id: 'SubTreeNode6'

}]

};

graph.data(data);

graph.render();

var count = 0;

graph.on('node:click', function(evt) {

var item = evt.item;

var nodeId = item.get('id');

var model = item.getModel();

var children = model.children;

if (!children || children.length === 0) {

var childData = {

id: 'child-data-' + count,

shape: 'rect',

children: [{

id: 'x-' + count

}, {

id: 'y-' + count

}]

};

graph.addChild(childData, nodeId);

count++;

graph.refreshLayout();

}

});