用svg来实现复杂的拓扑图展现和交互越来越繁琐了?

Question

当前的实现技术方案是 d3js+svg
d3来做数据绑定和事件绑定
svg来画展现的元素

如果只是展现简单的点 线拓扑图，简单的拖拽缩放操作没什么问题。
现在的需求 有点无力处理了，太容易出错了 简单说几点
1）就比如新增了个多链路的需求 图中234 238两节点之间的效果，我需要画多条两路，根据坐标计算不考虑链路拐弯弧度的话计算path路径值d需要六个点坐标

2）图中所有的元素 点 线 框都是svg append相应的rect path text元素 不是一般页面中写一些元素，这些元素所处的位置都是计算的坐标来定，拖拽时候 缩放时候需要重新计算影响到的元素 节点链路 组合框等等坐标 感觉太容易出错了

3）位置偏差

有同学用svg来实现这种比较复杂的交互处理么 求点建议或者更好的方案，感觉现在实现有点吃力了。

Answer 1

d3 + svg 是一个不错的解决方案了

鉴于d3用的不熟（如果不是用的那个vue版本loader解析svg有问题，直接vue就好了），最后我这边项目还是使用了jquery解决，这样就方便了。。。至于svg的绘制，由于项目里有webpack，我就照着html parser 撸了一个项目专属的轮子（没啥测试什么的不建议用，有需求可以参照着实现）svg-dom-loader

这样画好svg用loader载入就可以了，还算勉强够用。

然后里面的事件触发什么的这样实现的：

1. 可以确定每一个元素都是基于某个对象渲染的，所以可以给每一个dom上一下标识（如data-id="12239941" ，这会减慢渲染速度，如果不是频繁刷新的话应该问题不大）

2. 对于特定需要交互的元素，对整个元素（包括子元素）打上标记（如data-control='link'）

3. 使用一个控制中心，挂载 事件监听 到最上级元素，然后通过 事件委托 ，把操作的target的data-control找出来，然后派发给对应的执行器

4. 把单独的path计算什么抽离出来，抽象成定参的（这样也方便做单元测试），然后生成path路径使用

Answer 2

你好，你现在这种效果实现的方案能分享下吗？我也遇到一个类似的需求，还在找解决方案