VivaGraphJS 升级指南：从旧版本迁移到新版本的最佳实践

VivaGraphJS 升级指南：从旧版本迁移到新版本的最佳实践

VivaGraphJS Graph drawing library for JavaScript 项目地址: https://gitcode.com/gh_mirrors/vi/VivaGraphJS

概述

VivaGraphJS 是一个功能强大的图形可视化库，随着版本的迭代，其架构和API也在不断优化。本文将为开发者详细解析从旧版本升级到新版本时需要注意的关键变化，帮助您顺利完成迁移工作。

从 0.6.x 迁移至 0.7.x

架构变革

0.7.x 版本最大的变化是从单体架构转向模块化设计。现在 VivaGraphJS 由一系列小型模块组成，这些模块经过充分测试并拥有完善的文档。

布局API的变化

Viva.graph.Layout.forceDirected 已被更高效、测试覆盖率更高的模块取代。

获取链接位置

// 旧版本(0.6.x)
var linkPosition = layout.getLinkPosition(link);

// 新版本(0.7.x)
var linkPosition = layout.getLinkPosition(link.id);

设置节点位置

// 旧版本
layout.setNodePosition(node, x, y);

// 新版本
layout.setNodePosition(node.id, x, y);

布局设置变更

力导向布局的设置现在通过 layout.simulator 访问：

• layout.drag() → simulator.dragCoeff()
• layout.springCoeff() → simulator.springCoeff()
• layout.springLength() → simulator.springLength()
• layout.gravity() → simulator.gravity()
• layout.theta() → simulator.theta()

生成器变化

图形生成器模块已被替换，包含了原有所有图形类型及新增图形。

// 旧版本
Viva.Graph.generator().randomNoLinks(42);

// 新版本
Viva.Graph.generator().noLinks(42);

废弃的API

• Viva.Graph.Point2d 已移除，建议使用普通对象 {x: 42, y: 42}
• Viva.Graph.graph.addEventListener 替换为 on() 方法
• Viva.Graph.View.cssGraphcis 已废弃
• Viva.Graph.View.svgNodeFactory 已废弃
• geom.convexHull 已废弃
• Viva.Graph.community 已废弃

从 0.5.x 迁移至 0.6.x

0.5.x 和 0.6.x 版本API几乎完全相同，没有破坏性变更。主要变化是构建系统从grunt迁移到了gulp，并修复了大量拼写错误和文档问题。

从 0.4.x 迁移至 0.5.x

节点位置的变化

position 属性从节点对象移到了布局提供者中。

原因：共享节点位置使得同一图形无法被多个不同的布局器渲染。

// 旧版本(0.4.x)
graph.forEachNode(function(node) {
  var position = node.position;
  position.x += 1;
});

// 新版本(0.5.x)
graph.forEachNode(function(node) {
  var position = layout.getNodePosition(node.id);
  position.x += 1;
});

初始化节点位置使用：layout.setNodePosition(node, x, y)

UI属性的变化

ui 属性从节点/链接对象移到了图形提供者中。

原因：共享UI属性使得同一图形无法被多个渲染器渲染。

// 旧版本
graph.forEachNode(function(node) {
  console.log(node.ui);
});

// 新版本
graph.forEachNode(function(node) {
  console.dir(graphics.getNodeUI(node.id));
});

节点固定状态的变化

node.isPinned 不再用于确定节点是否固定，此功能已移至布局器。

原因：在一个渲染器中固定节点不应影响同一节点在其他渲染器中的行为。

// 旧版本
node.data.isPinned = !node.data.isPinned;

// 新版本
var wasPinned = layout.isNodePinned(node);
layout.pinNode(node, !wasPinned);

升级建议

1. 逐步迁移：建议先在一个非生产环境中测试所有变更
2. 关注性能：新版本的布局算法通常更高效，但可能需要调整参数
3. 利用模块化：新的模块化设计允许更灵活地组合功能
4. 测试图形交互：特别是与节点固定和位置相关的功能

通过遵循本指南，您应该能够顺利将项目迁移到最新版本的VivaGraphJS，并充分利用其改进的功能和性能提升。

VivaGraphJS Graph drawing library for JavaScript 项目地址: https://gitcode.com/gh_mirrors/vi/VivaGraphJS