Graph.destroy() 销毁当前图实例,释放与图实例相关的所有资源。 ⚠️ 注意: 销毁后无法进行任何操作,如果需要重新使用,需要重新创建一个新的图实例。 destroy(): void; 使用场景: 当用户关闭图表或切换到其他视图时,可以调用此方法来释放资源。 在需要重新创建图实例时,确保先销毁旧的实例,以避免内存泄漏。上...
然后,我们假设已经有一些节点和边被添加到了图形实例中。最后,通过调用graph.destroy()方法,我们清空了画布并销毁了图形实例。 请注意,destroy方法不仅会移除画布上的所有元素,还会销毁图形实例,这意味着你将无法再次使用该实例进行任何操作。如果你只是想清除画布上的元素而保留图形实例,你可能需要手动移除所有节点和边,...
const { Graph, register, Rect, ExtensionCategory } = g6; // 第一步:创建自定义节点类 class DualLabelNode extends Rect { // 副标题样式 getSubtitleStyle(attributes) { return { x: 0, y: 45, // 放在主标题下方 text: attributes.subtitle || '', fontSize: 12, fill: '#666', textAlign...
destroy()销毁实例 getBBox()获取实例的包围盒 graph method graph.save() graph.read(data) 读数据渲染 graph.find(id) 寻找数据模型 graph.add(type, model) graph.remove(item) graph.update(item, model) item为id或 项对象 graph.getItems();获取图内所有项 graph.getNodes() graph.getEdges() graph...
graph.on() Graph 对象的生命周期为:初始化 —> 加载数据 —> 渲染 —> 更新 —> 销毁。 必要配置项 上面代码中实例化 Graph 的部分使用了三个必要的配置项: container width、height 常用配置项 使用canvas 或 svg 渲染 renderer 自适应画布 fitView ...
Graph 是 G6 图表的载体,所有的 G6 节点实例操作以及事件,行为监听都在 Graph 实例上进行,其下包括一个或多个图形分组group。 Graph 的生命周期主要有五个:初始化—>加载数据—>渲染—>更新—>销毁。五个生命周期对应五个方法:G6.Graph、data(data)、render()、changeData(data)、clear() ...
(); }); switchButton.addEventListener('click', (e) => { if (switchButton.value === 'Disable') { switchButton.value = 'Enable'; graph.removePlugin(fisheye); } else { switchButton.value = 'Disable'; fisheye = new G6.Fisheye({ r: 200, showLabel: true, }); graph.addPlugin(...
graph.updateItem(item, { label: input.value }) graph.layout(false) graph.off('wheelZoom', clickEvt) destroyEl() } } graph.on('wheelZoom', clickEvt) window.addEventListener('mousedown', clickEvt) window.addEventListener('scroll', clickEvt) ...
destroy()销毁实例 getBBox()获取实例的包围盒 graph method graph.save() graph.read(data) 读数据渲染 graph.find(id) 寻找数据模型 graph.add(type, model) graph.remove(item) graph.update(item, model) item为id或 项对象 graph.getItems();获取图内所有项 graph.getNodes() graph.getEdges() graph...
实际操作中,开发人员需要理解其底层逻辑:删除过程不仅涉及视图层元素销毁,还需要同步更新内部数据模型。 通过具体案例看实际应用场景。假设存在一个社交网络关系图,用户点击某个节点时需要执行删除操作。正确的做法是先在交互事件中捕获目标元素: graph.on(’node:click’, e => const item = e.item if (item) ...