如何在d3文本函数中返回html？ [英] How to return html in d3 text function?

问题描述

我想要能够从文本函数返回html，如下所示：

I want to be able to return html from the text function like this:

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

试图使用& lt; br& gt; ，但没有工作。如何实现这一目标？

Tried to use <br>, but didnot work. How do I achieve this?

推荐答案

已编辑回答

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

Just noticed that you're working with a tspan here. Unfortunately you can't insert line breaks into svg text elements. Multiline text with SVG requires breaking up the text yourself and then laying it out by setting the dy attribute. D3 makes the laying out process pretty straight forward, but it still takes extra work.

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

More info in the intro paragraph here: http://www.w3.org/TR/SVG/text.html

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

D3有一个单独的方法： html（）方法，其工作方式类似于 text（）但未转义。 此处的更多信息。所以，很容易，你只需要：

D3 has a separate method for this: the html() method, which works just like text() but unescaped. More info here. So, easily enough, you just need:

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

这篇关于如何在d3文本函数中返回html？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！