本文采用的d3版本为第四版,4.9.1
先看实例效果,见图1, 在对节点进行缩放后,依旧能够做到以下两点:
1. 拖拽依旧能够完美做到鼠标跟随与连接关系跟随;
2. 缩放拖拽后,节点的位置依旧正确,利于数据保存;
再看操作失败的例子,见图2。
对现象进行分析,我们可以发现:
1. 鼠标跟随无差异,拖拽操作正常;
2. 节点位置正常;
3. 连线的更新状态错误;
继续诊断,我们可以得出这样的结论:连线的端点数据更新错误。 于是很显然,我们需要对tick事件进行修改,核心代码如下: