Question

我从d3.js开始，我正在尝试创建一个网络图，每个网络图都包含一个标签。

我想要的是换行svg文本。

我要做的是将文本分成多个<tspan>，每个都有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 text

的JSFIDDLE http://jsfiddle.net/xhNXS/

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

Answer 1

您需要指定每个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 here，以及其他一些小清理。

如何在javascript中换行svg文本？

1 个答案: