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

Question

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

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

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

Answer 1

在 Vue 2.x 项目中，如果你需要一个灵活的 JavaScript 连线库来连接 DOM 节点并支持自定义样式、颜色和平滑度等特性，以下是一些推荐，基于你的要求和已考虑的库：

1. jsPlumb

虽然你提到 jsPlumb 的社区版可能 API 不够强大，但它确实是连接 DOM 节点的一个非常灵活且轻量的选择。如果你需要更强大的功能，可以考虑升级到其商业版本。不过，如果你发现基础功能已经满足需求，那么继续使用并探索其 API 的深度可能会是一个不错的选择。

2. d3.js

D3.js 是一个强大的数据可视化库，虽然它本身不直接提供连线功能，但你可以通过 SVG 路径（<path>）或线条（<line>）元素以及 D3 的强大数据绑定和转换功能来轻松实现复杂的连线逻辑。D3 提供了极高的自定义能力，但需要一定的学习曲线。

3. vis.js

vis.js 是另一个功能丰富的库，它提供了网络图（Network Graph）等组件，这些组件可以用来表示节点和连线。虽然它主要用于构建复杂的网络图，但也可以用来实现简单的 DOM 节点连线，尽管可能需要一些额外的工作来将你的 DOM 节点与网络图中的节点对应起来。

4. GoJS

GoJS 是一个商业的 JavaScript 图表库，它提供了非常丰富的功能和自定义选项，包括连线。GoJS 支持连接 DOM 元素，并且其 API 允许你细致地控制连线的样式和行为。然而，由于是商业软件，它可能需要一定的费用。

5. Fabric.js

虽然 Fabric.js 主要是一个 HTML5 canvas 库，但它也可以用来处理连线，特别是当你想要在一个 canvas 上绘制复杂的图形和连线时。你可以通过监听 DOM 元素的位置和大小变化，并在 canvas 上绘制相应的图形和连线来实现。

结论

根据你的需求，如果你已经在项目中使用了 jsPlumb 并且觉得它基本满足需求，那么深入学习和利用它的 API 可能是最快捷的方法。如果你需要更高的自定义能力或更强大的功能，可以考虑 d3.js 或 GoJS。如果项目对成本敏感，那么 d3.js 是一个免费的强大选择。如果项目允许商业库的使用，并且你希望有更丰富的功能和更简单的实现方式，GoJS 可能是个不错的选择。