如何在javascript中对svg文本进行换行? [英] How to linebreak an svg text in javascript?

问题描述

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

I am starting with d3.js, and am trying to create a network graph each circle of which contains a label.

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

What I want is a line break an svg text.

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

What I am trying to do is to break the text into multiple <tspan>s, each with x="0" and variable "y" to simulate actual lines of text. The code I have written gives some unexpected result.

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.但是属于其他圈子的文字也显示在每个圈子中.如何克服这个问题?

In this code am splitting the text string by white space and appending the each splitted string to tspan. But the text belonging to other circle is also showing in each circle. How to overcome this issue?

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

Here is a JSFIDDLE http://jsfiddle.net/xhNXS/ with only svg text

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

Here is a JSFIDDLE http://jsfiddle.net/2NJ25/16/ showing my problem with tspan.

推荐答案

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

You need to specify the position (or offset) of each tspan element to give the impression of a line break -- they are really just text containers that you can position arbitrarily. This is going to be much easier if you wrap the text elements in g elements because then you can specify "absolute" coordinates (i.e. x and y) for the elements within. This will make moving the tspan elements to the start of the line easier.

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

The main code to add the elements would look like this.

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 意味着每个新行将从块的开头开始.

I'm using .each(), which will call the function for each element and not expect a return value instead of the .text() you were using. The dy setting designates the line height and x set to 0 means that every new line will start at the beginning of the block.

修改了 jsfiddle 此处，以及其他一些小的清理.

Modified jsfiddle here, along with some other minor cleanups.

这篇关于如何在javascript中对svg文本进行换行?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！