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

小编典典

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

javascript

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

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

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

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

阅读 343

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