问题起源: 用d3.js实现前端知识图谱的展示,开始跟着视频做了一个基本功能,但是节点的大小不能调整,于是做了一个大小调整的功能,即选中一个标签,然后再选择大小,从而实现让节点根据类型的不同来变化,然后自己就尝试做了一下,基本实现了选择大小的功能,但是新的问题随之而来,发现节点变大之后连接线很短,节点变小之后,连接线上的箭头又距离节点很远,原因在于原来节点间的连线是根据节点的圆心来连接的,箭头的位置是按照一个固定的半径大小进行偏移的,然后现在的节点的半径是用户可以随意调节的大小,所以设置一个固定的偏移量自然不能随着节点半径的变化而变化了。
知道了问题所在,就来解决问题,开始一个直观的思路是,让箭头的偏移量可以跟随半径的大小而变化,因为节点的半径的改变就是用的这个思路,获取到所有节点,然后遍历每一个,判断这个节点的类型是否有对应的用户自定义量,如果有的话就用用户自定义的,没有就用默认的。但是问题是,箭头的实现方式和节点的实现方式不同,节点的实现方式是每个节点是一个独立的个体,然后用<g>包着可以遍历每一个,但是箭头是用了两个<marker>就像模具,每个路径引用这个模具,每个模具都是一模一样的。所以没有办法遍历每一个箭头,而且箭头偏移量和节点的类型之间也没有关联,即使能够遍历也无法根据节点类型来动态调节偏移量。
后来在neo4j browser的前端代码中找到了灵感,它在实现边连线的时候,是用path在目