Question

请帮助开始使用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()方法，但这也不会起作用。我做错了什么？

Answer 1

SVG <text>元素不直接支持换行符。来自the specs：

每个'text'元素都会生成一个单独的文本字符串。 SVG不执行自动换行或自动换行。要实现多行文本的效果，请使用以下方法之一：


作者或创作包需要预先计算换行符并使用多个“文本”元素（每行文本一个）。

作者或创作包需要预先计算换行符并使用单个“text”元素和一个或多个'tspan'子元素，并为属性'x'，'y'，'dx'和'dy'为那些开始新线的角色设置新的起始位置。（此方法允许跨多行文本选择用户文本 - 请参阅文本选择和剪贴板操作。）

表示要在另一个XML命名空间中呈现的文本，例如嵌入在“foreignObject”元素内的XHTML [XHTML]。（注意：此方法的确切语义目前尚未完全定义。）

我不认为<div>元素在SVG内部工作。

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

在D3库中将html附加到.text（）方法

1 个答案: