为了账号安全,请及时绑定邮箱和手机立即绑定

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

/ 猿问

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

王益达 2017-12-04 09:29:10

想要实现的效果(文字长度不固定,初始位置居中;节点拖动连线,文字随连线变化居中):

http://img2.sycdn.imooc.com/5a24a42400019ead04790104.jpg

                                                【图 1】


现在实现的效果(文字初始位置未居中,不会随着连线的变化而变化):

http://img1.sycdn.imooc.com/5a24a43300015f7704330115.jpg

                                                【图 1】

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

查看完整描述

4 回答

?
南岸绿竹

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

查看完整回答
反对 2018-04-08
  • 王益达
    王益达
    关系连线用 path 绘制,通过计算文字的 dx 使文字居中显示在连线上。完整代码已发布手记,审核通过可以看到。
  • 王益达
    王益达
    可参考 http://www.imooc.com/article/25369
?
慕仰3222845

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

查看完整回答
反对 2018-03-09
点击展开后面1
?
王益达

问题已自行解决:

lineText.attr({
  'dx': d => getLineTextDx(d)
});
function getLineTextDx(d) {
    const sr = d.radius;
    const sx = d.source.x;
    const sy = d.source.y;
    const tx = d.target.x;
    const ty = d.target.y;
    const distance = Math.sqrt(Math.pow(tx - sx, 2) + Math.pow(ty - sy, 2));
    
    const textLength = d.alllabel.length;
    const deviation = 8; // 调整误差
    const dx = (distance - sr - textLength * lineTextFontSize) / 2 + deviation;
    
    return dx;
}


查看完整回答
反对 2017-12-04

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信