javascript - 向D3路径添加标签

  显示原文与译文双语对照的内容
0 0

我知道如何将文本元素添加到简单节点( 附加文本) 。 问题是,当我想向周围的几个节点添加文本时。 我已经在 http://jsfiddle.net/FEM3e/5/ 创建了示例请忽略左上角的节点。 所以我有两组节点。 我想为每个组添加文本。 所需输出 http://dopisna.bencin.si/screenshot.png的Printscreen 。

我设定了路径


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);
 });

我尝试追加没有成功的文本。 我在请求一些提示。

时间: 原作者:

0 0

好的。问题是,你使用的是文本而不是 textPath 。 我修改了你的 to,现在有些文本,虽然有些相当丑糙的文本,追加到你的路径。

我所做的唯一真正的改动是添加了这个 Fragment:


 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; });

你可以看到,你通过通常的选择和数据绑定。 然后用想要( 绝对改变我从麦克风里借来的)的属性附加文本,然后附加文本路径,将它链接到 xlink:href 属性中的路径元素。 显然,然后创建一些文本。 textPath的一个优点是它允许你附加弯曲的路径。

我认为使用这些组作为textPath数据有点过时,因这里你可以能想选择更合适的数据选择。

原作者:
...