1

请帮助在 D3 库< br/ >中的方法中使用该标记。.text()这就是我目前所尝试的。显然它向我展示了简单的文本，甚至是 br 标签。

var text_box = g
    .selectAll(".text-box")
    .data(function(d) { return points.slice(2, d); })
    .enter()
    .append("text")
    .attr({
        "class": "text-box",
        "dx": x,
        "dy": y,
        "transform": "translate(" + 15 + "," + 5 + ")"
    })
    .text(function(d, i) { return count+" changed <br/> by @"+name});

我什至尝试附加div标签并使用.html()方法，但这也行不通。我做错了什么？

4

1 回答 1

2

SVG<text>元素不直接支持换行符。从规格：

每个“文本”元素都会导致呈现单个文本字符串。SVG 不执行自动换行或自动换行。要实现多行文本的效果，请使用以下方法之一：

  • 作者或创作包需要预先计算换行符并使用多个“文本”元素（每行文本一个）。
  • 作者或创作包需要预先计算换行符并使用单个“text”元素和一个或多个“tspan”子元素，这些子元素的属性“x”、“y”、“dx”和“dy”具有适当的值为那些开始新行的字符设置新的开始位置。（这种方法允许用户在多行文本中选择文本——请参阅文本选择和剪贴板操作。）
  • 表达要在另一个 XML 名称空间中呈现的文本，例如嵌入在“foreignObject”元素中的 XHTML [XHTML]。（注意：此时此方法的确切语义尚未完全定义。）

我也不认为<div>元素在 SVG 中起作用。

第二种方法的一个例子在这里：http: //jsfiddle.net/eVmsW/

于 2013-03-10T19:06:32.160 回答