在D3中创建换行符

Question

我正在创建一个树形图（），并希望在文本长于10个字符时创建换行符。

因此这个

看起来像这样

首先，我使用一种方法以指定的长度吐出字符串：

function wordwrap( str, width, brk, cut ) {    
            brk = brk || 'n';
            width = width || 75;
            cut = cut || false;
            if (!str) { return str; }
            var regex = '.{1,' +width+ '}(\s|$)' + (cut ? '|.{' +width+ '}|.+$' : '|\S+?(\s|$)');
            return str.match( RegExp(regex, 'g') ).join( brk )
        }

这是用于在每个节点生成文本的D3：

nodeEnter.append("svg:text")
                    .attr("x", function(d) { return d.children || d._children ? -10 : 10; })
                    .attr("dy", ".35em")
                    .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
                    .text(function(d) {  if(d.name.length > 10) { return wordwrap(d.name, 10, '<br>') } } )
                    .style("fill-opacity", 1e-6)
                    .style("fill", "white")
                    .style("font-size", 22);

您可以看到我已将wordwrap方法输入到D3代码中。但它所做的只是在树形图的实际文本中显示
标签。

如何根据长度拆分文本，以便D3在字符串超过10个字符时对其进行换行。

Answer 1

此时你已经注意到“＆lt; br＆gt;”在svg：text元素中不起作用，所以我看到了两种方法来完成你需要的东西：

1. 使用svg textarea
2. 只要您想添加换行符，请包含svg tspan。

对于第一种方法，请看： https://www.w3.org/TR/SVGTiny12/text.html#TextAreaElement

您需要做的就是定义文本区域大小，让svg处理字符。您可能需要调整文本大小以使其看起来符合您的需要。

对于第二种方法，请看： https://www.w3.org/TR/SVG/text.html#TSpanElement

在这种情况下，你必须包含逻辑，以便在你希望换行时在你的svg：text元素中附加一个tspan [append（'svg：tspan'）]。

您必须更改nodeEnter.append的逻辑，但这不难实现。