如何在javascript中换行svg文本

How to linebreak an svg text in javascript?

本文关键字：换行 svg 文本 javascript      更新时间：2023-09-26

我从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 文本的 JSFIDDLE http://jsfiddle.net/xhNXS/

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

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

相关文章：