我知道如何将文本元素添加到简单节点(追加文本)。问题是当我想将文本添加到围绕多个节点的路径时。我在 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);
});
我试过添加文本但没有成功。我正在寻求一些提示。
最佳答案
那好吧。问题是您使用的是文本而不是文本路径。我修改了你的 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)到它。
关于javascript - 将标签添加到 D3 路径,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18955218/