如何在D3图表的标签中包含换行符?

我正在使用D3生成条形图(我修改了此示例中的代码)。我在x轴上使用的标签每个都是几个字长,并且由于这会使所有标签重叠,因此我需要将这些标签跨行打断。(如果我可以用换行符替换每个标签中的所有空格,那将是很好的。)


我最初是通过用文字换行符(&#xA;)替换空格并xml:space="preserve"在标签的<text>元素上进行设置来尝试此操作的。不幸的是,事实证明SVG不尊重此属性。接下来,我尝试将每个单词都包装成<tspan>以后可以样式化的形式。我通过此功能传递了每个标签:


function (text) {

    return '<tspan>' + text.replace(/ /g, '</tspan><tspan>') + '</tspan>';

}

但这只是将文字<tspan>s放入输出中。如何将文本标签包装在tspans中(或执行其他操作),以使标签不重叠?


墨色风雨
浏览 332回答 3
3回答
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript