Question

在上面的代码我的.append（“text”）dosent work.I不会在我的链接上插入任何文本。我尝试使用link.append（“path”）..使用此我可以看到文本但不能看到链接。我想用 link.insert（“path”）仍然能够添加文本，并能够折叠和扩展节点以及链接文本。请帮忙

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;
    });

Answer 1

如果没有小提琴或工作代码的链接，这很难回答，但我认为这可能是你所追求的：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;
});

最后我添加了更新＆＃39;和＆＃39;删除＆＃39; linktext的块使用类似的链接方法。请注意，我还将样式移动到CSS以获得整洁

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

1 个答案: