javascript - 将标签添加到 D3 路径

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

那好吧。问题是您使用的是文本而不是文本路径。我修改了你的 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; });

您可以看到您完成了通常的选择和数据绑定(bind)。然后，您将文本附加到您想要的属性(一定要更改我从 Mikes Bl.ock 借用的属性)，然后附加文本路径，将其链接到 xlink:href 属性中的路径元素。显然，您随后创建了一些文本。 textPath 的一个很酷的事情是它允许您附加弯曲的路径。

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