过渡文本在D3

Transitioning Text in D3

本文关键字：D3 文本      更新时间：2023-09-26

我试图将文本添加到动态创建的节点，具体来说，就像这个图:http://bl.ocks.org/mbostock/999346

我不希望在可折叠的图形中添加文本，而是在运行时向插入节点的图形中添加文本，如上面的示例所示。

到目前为止，我有以下附加代码: 
node.enter().append("text", "g")
        .attr("x", function(d) { return (d.x);})
        .attr("y", function(d) { return (d.y);})
        .text(function(d) { return d.name; })
        .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; });

添加文本，但插入节点时不移动。

下面的行似乎移动了示例中的节点和链接:

    var t = svg.transition()
            .duration(duration);
    t.selectAll(".link")
            .attr("d", diagonal);
    t.selectAll(".node")
            .attr("cx", function(d) { return d.px = d.x; })
            .attr("cy", function(d) { return d.py = d.y; });

，但为文本添加了类似的函数:

 t.selectAll(".text")
        .style("fill-opacity", 1);

无效。

如果您能给我一些指导，我将非常感谢。

节点都是用d3.selectAll('.node')标识的，所以您需要为它们指定节点类。

同时，cx和cy属性在文本元素上不存在。您需要x和y代替。

相关文章：