小编典典

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

javascript

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

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

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

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


阅读 346

收藏
2020-05-01

共1个答案

小编典典

我最终使用以下代码在行中打破了每个 x 轴标签:

var insertLinebreaks = function (d) {
    var el = d3.select(this);
    var words = d.split(' ');
    el.text('');

    for (var i = 0; i < words.length; i++) {
        var tspan = el.append('tspan').text(words[i]);
        if (i > 0)
            tspan.attr('x', 0).attr('dy', '15');
    }
};

svg.selectAll('g.x.axis g text').each(insertLinebreaks);

请注意,这假设标签已经创建。那么标签将按照您所需的方式进行设置。)此外,还没有任何实际的换行逻辑;因此,请参见图9。该函数将每个空格转换为换行符。这很好地满足了我的目的,但是您可能需要编辑该split()行,以更聪明地了解如何将字符串的各个部分划分为几行。

2020-05-01