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

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

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

王益达 2017-12-04 09:29:10
想要实现的效果(文字长度不固定,初始位置居中;节点拖动连线,文字随连线变化居中):                                                【图 1】现在实现的效果(文字初始位置未居中,不会随着连线的变化而变化):                                                【图 1】请问如何修改代码来实现【图 1】 效果:a. 文字初始位置居中; b.连线伸缩时,文字会自适应居中?
查看完整描述

4 回答

?
南岸绿竹

TA贡献3条经验 获得超2个赞

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

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

TA贡献1条经验 获得超0个赞

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

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

TA贡献12条经验 获得超14个赞

问题已自行解决:

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
  • 4 回答
  • 1 关注
  • 7958 浏览
慕课专栏
更多

添加回答

举报

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