首頁(yè) 猿問(wèn) 用 d3.js...

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

Html5 JavaScript 大數(shù)據(jù)

王益達(dá) 2017-12-04 09:29:10

想要實(shí)現(xiàn)的效果（文字長(zhǎng)度不固定，初始位置居中；節(jié)點(diǎn)拖動(dòng)連線，文字隨連線變化居中）：????????????????????????????????????????????????【圖 1】現(xiàn)在實(shí)現(xiàn)的效果（文字初始位置未居中，不會(huì)隨著連線的變化而變化）：????????????????????????????????????????????????【圖 1】請(qǐng)問(wèn)如何修改代碼來(lái)實(shí)現(xiàn)【圖 1】效果：a. 文字初始位置居中； b.連線伸縮時(shí)，文字會(huì)自適應(yīng)居中？

查看完整描述

4 回答

南岸綠竹

TA貢獻(xiàn)3條經(jīng)驗(yàn) 獲得超3個(gè)贊

我也想請(qǐng)問(wèn)下，文字是怎么顯示在連線上的

1 反對(duì) 回復(fù) 2018-04-08

王益達(dá)
關(guān)系連線用 path 繪制，通過(guò)計(jì)算文字的 dx 使文字居中顯示在連線上。完整代碼已發(fā)布手記，審核通過(guò)可以看到。

回復(fù) 2018-04-09
王益達(dá)
可參考 http://idcbgp.cn/article/25369

回復(fù) 2018-04-10

慕仰3222845

TA貢獻(xiàn)1條經(jīng)驗(yàn) 獲得超1個(gè)贊

請(qǐng)問(wèn)您文字在連線中間是怎么做到的？

1 反對(duì) 回復(fù) 2018-03-09

王益達(dá)
通過(guò)計(jì)算 dx 控制文字位置，主要代碼邏輯就在下面。

回復(fù) 2018-03-15
王益達(dá)
可參考 http://idcbgp.cn/article/25369

回復(fù) 2018-04-10
qq_一只星冰樂(lè)_0
你好，請(qǐng)問(wèn)你這樣做以后縮放會(huì)影響到連線上文字的布局嗎

回復(fù) 2018-11-23

點(diǎn)擊展開(kāi)后面1條

王益達(dá)

TA貢獻(xiàn)12條經(jīng)驗(yàn) 獲得超15個(gè)贊

問(wèn)題已自行解決：

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;?//?調(diào)整誤差
????const?dx?=?(distance?-?sr?-?textLength?*?lineTextFontSize)?/?2?+?deviation;
????
????return?dx;
}

1 反對(duì) 回復(fù) 2017-12-04