我在向连接以下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); });
});
这当然很简单,因为这是我们已经做过的事情!