用 d3.js 做力导向图，如何连线上的文字始终居中

wilso***

想要实现的效果（文字长度不固定，初始位置居中；节点拖动连线，文字随连线变化居中）：

【图 1】

现在实现的效果（文字初始位置未居中，不会随着连线的变化而变化）：

【图 1】

请问如何修改代码来实现【图 1】效果：a. 文字初始位置居中； b.连线伸缩时，文字会自适应居中？

pyc***

我也想请问下，文字是怎么显示在连线上的

hft***

请问您文字在连线中间是怎么做到的？

kec***

问题已自行解决：

lineText.attr({'dx':d=>getLineTextDx(d)});functiongetLineTextDx(d){constsr=d.radius;constsx=d.source.x;constsy=d.source.y;consttx=d.target.x;constty=d.target.y;constdistance=Math.sqrt(Math.pow(tx-sx,2)+Math.pow(ty-sy,2));consttextLength=d.alllabel.length;constdeviation=8;//调整误差constdx=(distance-sr-textLength*lineTextFontSize)/2+deviation;returndx;}

时代威客APP

时代威客公众号

时代威客小程序

猜你需要

热门需求

用 d3.js 做力导向图，如何连线上的文字始终居中

参与会员3

可能感兴趣的问答

最新任务

最新问答

优

快

专

保

新手帮助

平台规则

关于时代

便捷服务

微信小程序

新浪微博

手机客户端