[英]Adding text labels to force directed graph links in d3.js
我在向以下D3JS連接的節點圖中的連接節點的鏈接添加文本時遇到麻煩: http : //jsfiddle.net/rqa0nvv2/1/
誰能向我解釋添加它們的過程是什么?
var link = svg.selectAll(".link")
.data(links)
.enter().append("line")
.attr("class", function(d) { if(d.value == "visible") {return "link";} else return "" })
.style("stroke-width", function(d) { return Math.sqrt(d.stroke); });
link.append("svg:title").text(function(d) { return "Unit: " + ", Formula: ";});
謝謝!
僅需進行幾次更改即可將文本附加到邊緣。
首先,當前方法的問題是您將<text>
推到<line>
。 這只是在SVG中無法完成,因此您需要創建一個<g>
(組)以包含行和文本:
var link = svg.selectAll(".link")
.data(links)
.enter()
.append("g")
.attr("class", "link-group")
.append("line")
.attr("class", function(d) { return d.value == "visible" ? "link" : ""; })
.style("stroke-width", function(d) { return Math.sqrt(d.stroke); });
好的,僅添加此內容不會在視覺上進行任何更改,但確實會創建我們需要的組。 因此,我們需要添加類似以下內容的文本:
var linkText = svg.selectAll(".link-group")
.append("text")
.data(force.links())
.text(function(d) { return d.value == "visible" ? "edge" : ""; })
.attr("x", function(d) { return (d.source.x + (d.target.x - d.source.x) * 0.5); })
.attr("y", function(d) { return (d.source.y + (d.target.y - d.source.y) * 0.5); })
.attr("dy", ".25em")
.attr("text-anchor", "middle");
這將添加文本並進行初始定位。 隨意(請!)設置文本樣式並根據您的外觀更改內容。 最后,我們需要使其與力導向圖一起移動:
force.on("tick", function() {
link
.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });
node
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
linkText
.attr("x", function(d) { return (d.source.x + (d.target.x - d.source.x) * 0.5); })
.attr("y", function(d) { return (d.source.y + (d.target.y - d.source.y) * 0.5); });
});
當然這很簡單,因為這與我們已經做的一樣!
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.