Question

我知道如何将文本元素添加到简单节点（追加文本）。问题是我想在几个节点周围的路径中添加文本。我在http://jsfiddle.net/FEM3e/5/上创建了示例请忽略左上角的节点。所以我有两组节点。我想为每个小组添加文字。所需输出的http://dopisna.bencin.si/screenshot.png。

我在

中设置了路径

force.on("tick", function () {
        node.attr("transform", function (d) {
            return "translate(" + d.x + "," + d.y + ")";
        });
        vis.selectAll("path")
            .data(groups)
            .attr("d", singlePath)
            .enter().insert("path", "g")
            .style("fill", groupFill)
            .style("stroke", groupFill)
            .style("stroke-width", 57)
            .style("stroke-linejoin", "round")
            .style("opacity", .7);
    });

我尝试过附加文字但没有成功。我想要一些提示。

Answer 1

那好吧。问题是你使用的是文本而不是textPath。我修改了你的fiddle，现在有一些文字，虽然有一些相当丑陋的文字，附在你的路径上。

我所做的唯一真正的改变是添加了这个片段：

        vis.selectAll("text")
            .data(groups)
            .enter()
        .append("text")
            .attr("x", 8)
            .attr("dy", 28)
           .append("textPath")
        .attr("xlink:href", function (d,i) { return "#path_" + i; })
        .text(function (d,i) { return "path_" + i; });

您可以看到您经历了通常的选择和数据绑定。然后，使用所需的属性附加文本（肯定会更改我从Mikes Bl.ock中借用的属性），然后将文本路径附加到xlink：href属性中的路径元素。显然你然后创建了一些文本。关于textPath的一个很酷的事情是它允许你追加弯曲的路径。

我认为使用组作为textPath的数据有点过分，因此您可能希望选择更合适的数据选择来绑定到此。

将标签添加到D3路径

1 个答案: