无法在d3折叠树中的链接上添加文本 [英] Unable to add text on link in d3 collapsible tree
问题描述
在上面的代码我的.append（文本）dosent工作。我没有得到任何文本插入我的链接。
我试图使用link.append（路径）..使用这个我可以看到文本，但不是链接。我想使用
link.insert（path），仍然能够添加文本，并能够折叠和展开节点与链接
文本。 Pls help
in the above code my .append("text") dosent work.I do not get any text inserted on my links. i tried using link.append("path")..using this i can see the text but not the links. I want to use link.insert("path") and still be able to add text and be able to collapse and expand nodes along with the link text. Pls help
var link = svg.selectAll("path.link")
.data(links, function (d) { return d.target.id; });
// Enter any new links at the parent's previous position.
// var link1=link.enter();
link.enter().insert("path", "g")
.attr("class", "link")
.attr("d", function (d) {
var o = { x: source.x0, y: source.y0 };
return diagonal({ source: o, target: o });
});
link.enter()
.append("g")
.attr("class", "link")
.append("text")
.attr("font-family", "Arial, Helvetica, sans-serif")
.attr("fill", "Black")
.style("font", "normal 12px Arial")
.attr("transform", function(d) {
return "translate(" +
((d.source.y + d.target.y)/2) + "," +
((d.source.x + d.target.x)/2) + ")";
})
.attr("dy", ".35em")
.attr("text-anchor", "middle")
.text(function(d) {
console.log(d.target.name);
return d.target.name;
});
推荐答案
这是很难回答没有小提琴或链接到工作代码，但我认为这可能是你以后： http://jsfiddle.net/henbox / 82pepd2a / 9 /
This was difficult to answer without a fiddle or a link to working code, but I think this is maybe what you were after: http://jsfiddle.net/henbox/82pepd2a/9/
您应该在与节点文本（黑色）对应的链接上看到红色文本，这些应该转换为节点\链接移动。
You should see red text on the links that corresponds to the node text (in black) and these should transition as nodes \ links move.
我创建了一个新的变量 var linktext
I created a new variable var linktext to handle the text separate from the links (path elements) themselves, since this was what was causing you paths not to show.
我也使用了 insert（g）而不是 append（g）添加一个全新的 g 路径中放置 g 和文本 code>。以下是重要的资料：
I also used insert("g") instead of append("g") to add a completely new g element, rather than placing the g and text inside each path. Here's the important stuff:
// Update the link text
var linktext = svg.selectAll("g.link")
.data(links, function (d) {
return d.target.id;
});
linktext.enter()
.insert("g")
.attr("class", "link")
.append("text")
.attr("dy", ".35em")
.attr("text-anchor", "middle")
.text(function (d) {
//console.log(d.target.name);
return d.target.name;
});
最后，我为 linktext添加了'update' code>使用用于链接的类似方法。请注意，我也将样式移动到了CSS的整洁
Finally I added 'update' and 'remove' blocks for linktext using a similar approach used for links. Note that I also moved the styling to CSS for tidyness
这篇关于无法在d3折叠树中的链接上添加文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
