有那些好用的 js 连线库推荐？

Question

项目使用 vue 2.x 版本开发，需要做一个类似“连线”的功能，就是把页面上的一些 dom 节点连接起来，希望可以能够对连线做一些比较常见的操作，例如：线的颜色、样式、平滑度等。期间考虑了一些库，要不就收费，要不就感觉不够灵活，例如：无法连接 dom 节点，只能连接库中提供的一些简单的图形，但是之所以需要连接dom节点，就是考虑到html、css操作起来比较方便。

目前考虑过：JointJS、jsPlumb、d3、mxGraph、gojs、vis.js

目前项目中用的是 jsPlumb，感觉api不够强大（可能因为是社区版），其他感觉都挺好，连接dom节点，轻量，只负责连线，对连线的对象没有要求；

Answer 1

jsPlumb 挺好的，
https://g6.antv.antgroup.com/examples 可以试试这个

Answer 2

在前端开发中，连接节点或元素的连线功能常用于图形编辑器、流程图、组织结构图等应用场景。以下是一些常用且好用的 JavaScript 连线库：

1. jsPlumb

• 简介：jsPlumb 是一个功能强大且易于使用的 JavaScript 库，专门用于在 Web 应用中创建连线。它支持拖放、节点连接、事件处理等功能，适合用于复杂的图形编辑器和流程图应用。

• 特点：

  • 支持多种连接器（直线、贝塞尔曲线等）。
  • 提供内置的拖放支持。
  • 丰富的事件处理机制。
  • 可扩展性强，适用于大多数连线场景。
• 网址：jsPlumb

2. JointJS

• 简介：JointJS 是一个支持创建和互动性强的图形应用程序的库。它允许你创建流程图、组织结构图、ER 图等。JointJS 提供了非常丰富的 API 和插件。

• 特点：

  • 强大的图形模型系统。
  • 支持拖放和交互式图形操作。
  • 通过 Rappid 插件扩展功能，如网格对齐、缩放和分组。
• 网址：JointJS

3. GoJS

• 简介：GoJS 是一个功能丰富的 JavaScript 库，用于构建交互式图表和图形。它特别适合用于构建复杂的流程图、图表和数据可视化应用。

• 特点：

  • 提供全面的布局算法和样式选项。
  • 支持交互式编辑和实时更新。
  • 内置丰富的图形和节点类型。
  • 提供优质的文档和技术支持。
• 网址：GoJS

4. Diagram.js

• 简介：Diagram.js 是一个基于 Web 的图形库，专注于构建业务流程模型和其他类型的交互式图表。它的核心是一个高效的渲染引擎，并提供了扩展和自定义的能力。

• 特点：

  • 专为流程图设计，支持 BPMN、DMN 等标准。
  • 灵活的 API，可以自定义节点、连线和图形行为。
  • 集成简单，适用于各种前端框架。
• 网址：Diagram.js

5. Konva

• 简介：Konva 是一个用于构建 2D 图形应用的 JavaScript 库，适用于高性能需求的场景。它允许在 HTML5 Canvas 上创建复杂的图形，并支持交互和动画。

• 特点：

  • 强大的 2D 图形渲染引擎。
  • 支持多层次图形、事件处理和动画。
  • 轻量级且性能优化，适合高并发的图形应用。
• 网址：Konva

6. Cytoscape.js

• 简介：Cytoscape.js 是一个用于构建图形网络的 JavaScript 库，常用于数据可视化和网络分析。它支持多种布局算法和强大的图形交互功能。

• 特点：

  • 支持大量节点和边的图形结构。
  • 提供多种布局和样式自定义选项。
  • 可以与其他可视化库集成，如 D3.js。
• 网址：Cytoscape.js

7. Rete.js

• 简介：Rete.js 是一个专注于数据流编程的连线库，特别适用于构建可视化编程工具和数据流图。它支持拖放、节点编辑和连线操作。

• 特点：

  • 直观的节点编辑器。
  • 灵活的插件系统，支持多种节点类型。
  • 良好的扩展性，适合构建自定义的编程工具。
• 网址：Rete.js

总结

• 简单应用：如果你的需求相对简单，jsPlumb 和 Konva 是不错的选择，易于上手且功能强大。
• 复杂图形应用：对于更复杂的需求，如图形编辑器或流程图构建，JointJS、GoJS 和 Cytoscape.js 提供了更丰富的功能和扩展性。
• 数据流和编程工具：Rete.js 非常适合用于构建数据流编程工具或节点编辑器。

根据你的具体需求选择适合的连线库，可以更高效地完成开发任务。

Answer 3

JointJS不错，基于SVG和VML，兼容性不错，可以创建交互式图形和模型，特别适合于构建复杂的图形应用程序，如组织结构图、网络图和流程图。它有丰富的API，对创建和操作图形就变得比较简单了，并且支持自定义图形元素和连接。https://www.jointjs.com/

另外vis.js也可以试下，动态、基于浏览器的可视化库，处理大量的动态数据和交互http://visjs.org/