在D3图形y轴标签中添加换行符

时间:2013-08-28 13:12:44

标签: javascript text svg d3.js

我正在尝试在我的D3图表上的y轴标签上添加换行符,这会显示移动的带宽。目前它显示内联5 GB,我希望它显示如此,

5
GB

因此,由于没有简单的方法可以为svg文本元素添加换行符,所以我选择在渲染后选择所有文本元素,我将它们分割到空格并将它们放在{{1文本元素内部的元素,<tspan>的位置略低于值,这似乎有效,除了标签根本不显示,即使它们确实存在于页面上。

以下是代码片段

GB

基本上我想在svg文本元素中添加换行符。我尝试了一些方法,但无济于事。

1 个答案:

答案 0 :(得分:4)

问题是您将tspan元素添加为没有命名空间的文本。这样它们就被解释为HTML。如果使用D3添加它们或使用命名空间显式创建元素,它应该可以工作,即

el.text('');
d3.select(el).append("tspan").text(sections[0]);
...
相关问题