如何在javascript中换行svg文本？

Question

我从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.

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 这里,与其他一些次要的清理一起.