使用 d3.js 时可以在文本中插入换行符吗？ [复制]

Posted 2023-02-22

【中文标题】使用 d3.js 时可以在文本中插入换行符吗？ [复制]

【英文标题】：Can you insert a line break in text when using d3.js? [duplicate]

【发布时间】：2012-10-14 11:36:03

【问题描述】：

我正在寻找一种使用 d3.js 在工具提示文本元素中使用换行符的方法。

.text("test" +  "</br>" + "test")

以上以及其他类似的努力似乎都不起作用。

这里有一个帖子似乎回答了它：

https://groups.google.com/forum/?fromgroups=#!topic/d3-js/GgFTf24ltjc

但解决方案不是很清楚。在上述情况下如何使用.html？

.text(.html("test" + "" + "test"))

没用？

谢谢

【问题讨论】：

考虑我在下面的答案的评论中给出链接的解决方案。

如果您谈论 svg 图形中的 元素或 svg 之外的任何其他文本块（、、..），则解决方案会有所不同。接受的解决方案适用于后者，请参阅 Sergei Basharov 的前者链接。

This answer 有我想要的。

对我有用的是使用 .html（而不是 .text 或 .text(.html...): .on('mouseover', function(d) return ( tooltip . html( d.country + ' - 人口 ' + d.population...

【参考方案1】：

最好在第 1 行和第 2 行使用 'tspan' 属性 dy = 0em 和 dy = 1.2em

【参考方案2】：

由于您已经知道要在哪里打断文本，您可以考虑只添加单独的元素。

.append("text")
  .attr("dy", "0em")
  .text("line 1")   // "line 1" or whatever value you want to add here.

然后对于第二行，只需添加一个偏移量

.append("text")
  .attr("dy", "1em") // you can vary how far apart it shows up
  .text("line 2")   // "line 2" or whatever value you want to add here.

【讨论】：

你能提供任何成功的例子吗？我只是按照你的方式，无法取得任何预期的结果。

在我的情况下，只能显示第1行，其他都消失了