无法在d3可折叠树中的链接上添加文本
问题描述:
在上面的代码中我的.append(“text”)dosent work.I没有在我的链接上插入任何文本。 我试过使用link.append(“路径”)..使用这个我可以看到文本,但不是链接。我想使用 link.insert(“路径”),并且仍然能够添加文本,并能够与链接 文本一起折叠和展开节点。请帮助无法在d3可折叠树中的链接上添加文本
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/
您应该看到对应的链接红色文字到节点文本(黑色),这些应该在节点\链接移动时进行转换。
我创建了一个新变量var linktext
来处理与链接(path
元素)本身分开的文本,因为这是导致您不显示路径的原因。
我也使用insert("g")
代替append("g")
添加一个完全新的g
元件,而不是将所述g
和text
每个path
内部。这里是重要的东西:
// 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
使用用于链接了类似的做法。请注意,我也将样式移至CSS以保持整洁
看起来像这个例子被用作上述的基础:http://bl.ocks.org/mbostock/4339083 – 2014-09-02 13:30:23