3

我知道如何将文本元素添加到简单节点（附加文本）。问题是当我想将文本添加到围绕多个节点的路径时。我在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);
    });

我尝试附加文本但没有成功。我正在寻求一些提示。

4

1 回答 1

2

那好吧。问题是您使用的是文本而不是 textPath。我已经修改了你的小提琴，现在有一些文本，虽然是一些相当难看的文本，附加到你的路径。

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

        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 的数据有点矫枉过正，因此您可能需要选择更合适的数据选择来绑定到此。

于 2013-09-23T11:21:15.747 回答