已解決430363個問題，去搜搜看，總會有你想問的

用 d3.js 做力導向圖，如何連線上的文字始終居中

首頁猿問用 d3.js...

用 d3.js 做力導向圖，如何連線上的文字始終居中

Html5 JavaScript 大數據

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

想要實現的效果（文字長度不固定，初始位置居中；節點拖動連線，文字隨連線變化居中）：????????????????????????????????????????????????【圖 1】現在實現的效果（文字初始位置未居中，不會隨著連線的變化而變化）：????????????????????????????????????????????????【圖 1】請問如何修改代碼來實現【圖 1】效果：a. 文字初始位置居中； b.連線伸縮時，文字會自適應居中？

查看完整描述

4 回答

南岸綠竹

TA貢獻3條經驗獲得超3個贊

我也想請問下，文字是怎么顯示在連線上的

1 反對回復 2018-04-08

王益達
關系連線用 path 繪制，通過計算文字的 dx 使文字居中顯示在連線上。完整代碼已發布手記，審核通過可以看到。

回復 2018-04-09
王益達
可參考 http://www.xianlaiwan.cn/article/25369

回復 2018-04-10

慕仰3222845

TA貢獻1條經驗獲得超1個贊

請問您文字在連線中間是怎么做到的？

1 反對回復 2018-03-09

王益達
通過計算 dx 控制文字位置，主要代碼邏輯就在下面。

回復 2018-03-15
王益達
可參考 http://www.xianlaiwan.cn/article/25369

回復 2018-04-10
qq_一只星冰樂_0
你好，請問你這樣做以后縮放會影響到連線上文字的布局嗎

回復 2018-11-23

點擊展開后面1條

王益達

TA貢獻12條經驗獲得超15個贊

問題已自行解決：

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;
}

1 反對回復 2017-12-04

慕仰3222845
請問把文字寫在連線中間是怎么做的？

回復 2018-03-09

4 回答
1 關注
8328 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

用 d3.js 做力導向圖，如何連線上的文字始終居中

用 d3.js 做力導向圖，如何連線上的文字始終居中

4 回答

添加回答

用 d3.js 做力導向圖，如何連線上的文字始終居中

用 d3.js 做力導向圖，如何連線上的文字始終居中