本文介绍了使用D3.js在前端实现知识图谱展示时，如何处理节点大小可调且连接线长度随节点大小动态变化的问题。通过分析问题并寻找灵感，作者提出改变连线的起点，利用几何知识找到两个圆最近的两点进行连接，解决了箭头偏移量不随节点半径变化的问题。同时，文章也提到了在实现过程中遇到的路径长度未更新和左右两侧显示不一致的bug，并给出了相应的解决方案。
问题起源： 用d3.js实现前端知识图谱的展示，开始跟着视频做了一个基本功能，但是节点的大小不能调整，于是做了一个大小调整的功能，即选中一个标签，然后再选择大小，从而实现让节点根据类型的不同来变化，然后自己就尝试做了一下，基本实现了选择大小的功能，但是新的问题随之而来，发现节点变大之后连接线很短，节点变小之后，连接线上的箭头又距离节点很远，原因在于原来节点间的连线是根据节点的圆心来连接的，箭头的位置是按照一个固定的半径大小进行偏移的，然后现在的节点的半径是用户可以随意调节的大小，所以设置一个固定的偏移量自然不能随着节点半径的变化而变化了。
知道了问题所在，就来解决问题，开始一个直观的思路是，让箭头的偏移量可以跟随半径的大小而变化，因为节点的半径的改变就是用的这个思路，获取到所有节点，然后遍历每一个，判断这个节点的类型是否有对应的用户自定义量，如果有的话就用用户自定义的，没有就用默认的。但是问题是，箭头的实现方式和节点的实现方式不同，节点的实现方式是每个节点是一个独立的个体，然后用<g>包着可以遍历每一个，但是箭头是用了两个<marker>就像模具，每个路径引用这个模具，每个模具都是一模一样的。所以没有办法遍历每一个箭头，而且箭头偏移量和节点的类型之间也没有关联，即使能够遍历也无法根据节点类型来动态调节偏移量。
后来在neo4j browser的前端代码中找到了灵感，它在实现边连线的时候，是用path在目
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
