无法在d3折叠树中的链接上添加文本

问题描述

在上面的代码我的.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 uselink.insert("path") and still be able to add text and be able to collapse and expand nodes along with the linktext. 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;
    });

推荐答案

这是很难回答没有小提琴或链接到工作代码，但我认为这可能是你以后：

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折叠树中的链接上添加文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！