如何在 d3 文本函数中返回 html？

【问题标题】：How to return html in d3 text function?如何在 d3 文本函数中返回 html？
【发布时间】：2013-05-20 19:55:19
【问题描述】：

我希望能够像这样从文本函数返回 html：

textEnter.append("tspan")
          .attr("x", 0)
          .text(function(d,i) {
             return 'some text' + '<br/>' + d.someProp;
           })

尝试使用&lt;br&gt;，但没有成功。我如何做到这一点？

【问题讨论】：

我不了解 d3，但我注意到您将文本设置为 html 代码。你不能用.html 或.innerHTML 代替.text() 吗？

标签： javascript d3.js

【解决方案1】：

编辑答案

刚刚注意到您在这里使用的是 tspan。不幸的是，您不能在 svg 文本元素中插入换行符。使用 SVG 的多行文本需要自己分解文本，然后通过设置 dy 属性将其布局。 D3 使布局过程非常简单，但仍然需要额外的工作。

此处介绍段落中的更多信息：http://www.w3.org/TR/SVG/text.html

旧答案（适用于使用 html 元素，而不是 svg）

D3 对此有一个单独的方法：html() 方法，它的工作方式与text() 类似，但未转义。 More info here。所以，很容易，你只需要：

textEnter.append("tspan")
      .attr("x", 0)
      .html(function(d,i) {
         return 'some text' + '<br/>' + d.someProp;
       })

【讨论】：