Javascript 换行文本函数不创建新行

我有一张有标题的d3图表。标题是图表。但是，在小屏幕上，文本需要包装，以免溢出

但是，Bl.ocks文本换行方法不是创建新行，而是为每个单词创建一个新的tspan，然后将每个文本/tspan放在另一个文本/tspan的顶部

以下是该问题的一部分：

这是相关代码

var chartTitle = svg.append("text")
                .attr("y", -15 )
                .attr("text-anchor", "start")  
                .text("This is a very long chart title that should be wrapped!")
                .attr('class','chartTitle')
                      .call(wrap, width/2);



        function wrap(text, width) {
            text.each(function() {
              var text = d3.select(this),
                  words = text.text().split(/\s+/).reverse(),
                  word,
                  line = [],
                  lineNumber = 0,
                  lineHeight = 1.1, // ems
                  y = text.attr("y"),
                  dy = parseFloat(text.attr("dy")),
                  tspan = text.text(null).append("tspan").attr("x", 0).attr("y", y).attr("dy", dy + "em");
              while (word = words.pop()) {
                line.push(word);
                tspan.text(line.join(" "));
                if (tspan.node().getComputedTextLength() > width) {
                  line.pop();
                  tspan.text(line.join(" "));
                  line = [word];
                  tspan = text.append("tspan").attr("x", 0).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word);
                }
              }
            });
          }

CSS

---

最初由Mike Bostock（D3创建者）为编写的

wrap

函数使用文本

dy

属性（由轴生成器自动创建）。也就是说，代码的问题在于该文本元素中没有

dy

属性

您可以简单地调整函数，或者只设置一个零

dy

属性。下面是使用后者的演示：

var svg=d3.选择（“主体”）
.append（“svg”）；
var chartTitle=svg.append（“文本”）
.attr（“y”，20）
.attr（“dy”，0）//设置dy属性
.attr（“文本锚定”、“开始”）
.text（“这是一个很长的图表标题，应该进行包装！”）
.attr（'class'，'chartTitle'）
.呼叫（包裹，300/2）；
函数换行（文本、宽度）{
text.each（函数（）{
变量文本=d3。选择（此），
words=text.text（）.split（/\s+/）.reverse（），
单词
行=[]，
行号=0，
线宽=1.1，//ems
y=text.attr（“y”），
dy=parseFloat（text.attr（“dy”）），
tspan=text.text（null）.append（“tspan”）.attr（“x”，0）.attr（“y”，y）.attr（“dy”，dy+“em”）；
while（word=words.pop（））{
行。推（字）；
tspan.text（line.join（“”））；
if（tspan.node（）.getComputedTextLength（）>width）{
line.pop（）；
tspan.text（line.join（“”））；
行=[字]；
tspan=text.append（“tspan”）.attr（“x”，0）.attr（“y”，y）.attr（“dy”，++lineNumber*lineHeight+dy+“em”）.text（word）；
}
}
});
}

.chartTitle{
  font-size:20px;
}