我有一个类似于力导向图的例子。主要的区别在于没有力量,除了用户拖拽交互之外,布局是静态的。我添加了绘制凸包(作为svg:path元素)围绕用户定义的节点组的代码。当节点移动时(即
在拖动时,更新所有凸包图形:
我的唯一明确想法是在节点数组中存储凸包所包含的节点的ID,并仅更新该/那些凸包,而不是所有凸包。我还在思考更有效的数据结构来存储凸包数据(而不是路径本身)。目前,数据结构看起来像这样:
.on("drag")
),计算凸包的代码就会被触发。这意味着当节点被拖动时,它会不断地触发。通常会有10到30个凸包;一个节点可能在一个或多个凸包中。请见下面的内容:
在拖动时,更新所有凸包图形:
- 对于每个凸包,创建一个由组成节点坐标的数组。
- 用距离原始点一定距离r的8个点替换上述数组中的每个坐标对。这是为了填充/膨胀凸包,使其实际上不接触任何节点。
- 将计算出的坐标提供给
d3.geom.hull
。
我的唯一明确想法是在节点数组中存储凸包所包含的节点的ID,并仅更新该/那些凸包,而不是所有凸包。我还在思考更有效的数据结构来存储凸包数据(而不是路径本身)。目前,数据结构看起来像这样:
hulls = {1:{nodeIDs:[1,2,3,4,5], name:"hull1"}, 2:{...}, ...};
抱歉这个问题有点开放性,但是我希望能找到一些编程技术,使得这里的工作更有效率。
d3.js
完成,而不是你自己 - 所以我不会指望通过进行这种改变来获得显着的性能提升。(图形很难!) - cheeken