9

我从 d3.js 开始，并试图创建一个网络图，其中每个圆圈都包含一个标签。

我想要的是一个svg文本的换行符。

我要做的是将文本分成多个<tspan>s，每个都带有 x="0" 和变量 "y" 以模拟实际的文本行。我写的代码给出了一些意想不到的结果。

var text = svg.selectAll("text").data(force.nodes()).enter().append("text");

text       
 .text(function (d) {
 arr = d.name.split(" ");
 var arr = d.name.split(" ");
 if (arr != undefined) {
  for (i = 0; i < arr.length; i++) {
   text.append("tspan")
    .text(arr[i])
    .attr("class", "tspan" + i);
  }
 }
});

在这段代码中，我用空格分割文本字符串，并将每个分割的字符串附加到 tspan。但是属于其他圈子的文字也显示在每个圈子中。如何克服这个问题？

这是一个只有 svg 文本的 JSFIDDLE http://jsfiddle.net/xhNXS/

这是一个 JSFIDDLE http://jsfiddle.net/2NJ25/16/显示我的 tspan 问题。

4

1 回答 1

31

您需要指定每个tspan元素的位置（或偏移量）以给人一种换行的印象——它们实际上只是您可以任意定位的文本容器。text如果您将元素包装在元素中，这将容易得多，g因为您可以为其中的元素指定“绝对”坐标（即x和y）。这将使tspan元素更容易移动到行首。

添加元素的主要代码如下所示。

text.append("text")       
    .each(function (d) {
    var arr = d.name.split(" ");
    for (i = 0; i < arr.length; i++) {
        d3.select(this).append("tspan")
            .text(arr[i])
            .attr("dy", i ? "1.2em" : 0)
            .attr("x", 0)
            .attr("text-anchor", "middle")
            .attr("class", "tspan" + i);
    }
});

我正在使用.each()，它将为每个元素调用该函数，而不是期望返回值而不是.text()您使用的。该dy设置指定行高，x设置为 0 意味着每个新行都将从块的开头开始。

在这里修改了 jsfiddle ，以及其他一些小的清理。

于 2013-10-18T11:37:55.217 回答