G6
G2
G6
F2
L7
墨者学院
关于 G6
图表示例
API 文档
使用教程
返回旧版
树图
紧凑树
系统树
脑图树
辐射树
树图-边上显示label
文件系统
自定义树图
大数据量的树图
流图
桑基图
流程图
ER图
自定义流程图
网图
力导图
小米关系图谱
弧线图
环形弧线图
图布局
Circular 环图参数变化
Fruchterman 布局参数变化
Dagre 参数变化
Radial 布局参数变化
Radial 交互扩展节点
点击扩展节点
布局数据变化
子图布局
自定义布局 - 二分图
布局的时机监听
Bubbles 力导气泡
树和气泡
动画
状态切换
节点动画
默认动画
自定义动画
自定义元素
卡片节点
饼图节点
列表节点
面积图节点
环形柱状图节点
折线图节点
标注图节点
堆积柱状图节点
自定义折线方法1
自定义折线方法2
自定义箭头
交互
切换节点图片
动态加载数据
动态加载多条数据
Circle节点分组
Rect节点分组
文本
省略文本
文本换行
元素样式
内置节点和边
贝塞尔曲线
多标签节点
多标签边
辅助工具
Tooltip 节点和边的提示框
Minimap 缩略图
Grid 网格
Context Menu 右键菜单
响应节点区域事件
点击节点移动到中心
复杂案例
美国航线边绑定
北京地铁
聚类的折叠/扩展交互
自定义资金流转图
点击扩展节点
源码
复制成功
复制失败
全屏
复制
运行
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>点击扩展节点</title> <style>::-webkit-scrollbar{display:none;}html,body{overflow:hidden;margin:0;}</style> </head> <body> <div id="mountNode"></div> <script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script> <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.1.0/build/g6.js"></script> <script> /** * 该示例演示在力导布局中实现点击节点扩展相关点,并且固定被点击的节点 * by 十吾 */ var getNodeById = { data: { nodes: [{ id: "20", label: "name1" }, { id: "1", label: "name2" }], edges: [{ source: "20", target: "1" }] } // 根据节点扩展 }; var getNodesByNodeId = { data: { nodes: [{ id: "20", label: "祁同伟" }, { id: "22", label: "高晓秦" }, { id: "10", label: "高育良" }, { id: "12", label: "高晓凤" }, { id: "21", label: "梁璐" }, { id: "11", label: "吴淑芬" }, { id: "100", label: "小米" }, { id: "102", label: "茅台" }], edges: [{ target: "100", source: "20" }, { target: "102", source: "20" }, { target: "10", source: "20" }, { target: "11", source: "20" }, { target: "21", source: "20" }, { target: "21", source: "20" }, { target: "22", source: "20" }, { target: "11", source: "10" }, { target: "12", source: "10" }, { target: "22", source: "21" }, { target: "22", source: "12" }] } // 根据节点扩展 }; var getNodesByNodeId2 = { data: { nodes: [{ id: "22", label: "高晓秦" }, { id: "1000", label: "晓秦1" }, { id: "1001", label: "晓秦2" }, { id: "1002", label: "晓秦3" }, { id: "1003", label: "晓秦4" }, { id: "1004", label: "晓秦5" }], edges: [{ target: "22", source: "1000" }, { target: "22", source: "1001" }, { target: "22", source: "1002" }, { target: "1001", source: "1002" }, { target: "1000", source: "1" }, { target: "20", source: "1002" }, { target: "22", source: "1003" }, { target: "22", source: "1004" }] } }; var clickedNodeId = -1; var clickedNodePos = { 'x': 500, 'y': 300 }; // 封装点击添加边的交互 G6.registerBehavior('click-add-node', { getEvents: function getEvents() { return { 'node:click': 'onClick' }; }, onClick: function onClick(ev) { var itemModel = ev.item.getModel(); clickedNodeId = itemModel.id; clickedNodePos.x = itemModel.x; clickedNodePos.y = itemModel.y; var graph = this.graph; var nodes = graph.getNodes(); var edges = graph.getEdges(); var newData = getNodeById.data; if (itemModel.id == 20) newData = getNodesByNodeId.data; else if (itemModel.id == 22) newData = getNodesByNodeId2.data; var newNodeModels = newData.nodes; var newEdgeModels = newData.edges; var allNodeModels = [], allEdgeModels = []; // fix the existing nodes by set the fx and fy to the current value // to cancel the fix the node, set fx = null fy = null nodes.forEach(function(n, i) { var model = n.getModel(); model.fixed = true; model.fx = model.x; model.fy = model.y; allNodeModels.push(model); }); newNodeModels.forEach(function(nodeModel, i) { // if it does not exist in nodes var exist = false; nodes.forEach(function(n, i) { if (n.getModel().id == nodeModel.id) { exist = true; return; } }); // then add it into graph if (!exist) { // set the initial positions of the new nodes at the clicked node nodeModel.x = itemModel.x; nodeModel.y = itemModel.y; var node = graph.addItem('node', nodeModel); allNodeModels.push(nodeModel); nodes.push(node); } }); newEdgeModels.forEach(function(em, i) { // if it does not exist in nodes var exist = false; edges.forEach(function(e, i) { var eModel = e.getModel(); if (eModel.source == em.source && eModel.target == em.target) { exist = true; return; } }); if (!exist) { var edge = graph.addItem('edge', em); edges.push(edge); } }); edges.forEach(function(e, i) { allEdgeModels.push(e.getModel()); }); graph.changeData({ nodes: allNodeModels, edges: allEdgeModels }); } }); var data = getNodeById.data; var graph = new G6.Graph({ container: 'mountNode', width: window.innerWidth, height: window.innerHeight, layout: { type: 'force', // 向心力作用点 nodeStrength: -30, // 节点作用力 preventOverlap: true, // 是否防止节点相互覆盖 nodeSize: 40, // 节点大小 / 直径 edgeStrength: 0.1, // 边的作用力, 默认为根据节点的入度出度自适应 linkDistance: 100 // 默认边长度 }, modes: { default: ['drag-node', 'click-select', 'click-add-node'] }, defaultNode: { size: [40, 40], color: 'steelblue' }, defaultEdge: { size: 1, color: '#e2e2e2' }, nodeStateStyles: { selected: { fill: 'steelblue' } } }); var descriptionDiv = document.createElement("div"); descriptionDiv.innerHTML = '点击节点“name1”或“高晓秦”试一试'; var graphDiv = document.getElementById("mountNode"); document.body.insertBefore(descriptionDiv, graphDiv); graph.data(data); graph.render(); graph.on('node:dragend', function(ev) { var itemModel = ev.item.getModel(); itemModel.fixed = true; itemModel.fx = ev.x; itemModel.fy = ev.y; }); </script></body> </html>