Javascript 在D3中包装长文本标签，无需额外的新行

我能够在D3.js中包装长文本标签。然而，我看到我的D3图表在需要将特定文本包装成两行以上时插入了额外的新行。你能帮我把这些多余的新线包起来吗

这是我的标签数据和Mike Bostock的代码

treeData = {
    'name': 'Good Short Label',
    'parent': 'null',
    '_children': [
        {'name': 'Very Very Long Good Wapped Label'},
        {'name': 'Very Very Very Very Very Very Very Very Very Long Label With Extra New Line'},
        {'name': 'Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Long Label With Extra New Lines'}
    ]
};

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
            x = text.attr('x'),
            y = text.attr('y'),
            dy = 0, //parseFloat(text.attr('dy')),
            tspan = text.text(null)
                .append('tspan')
                .attr('x', x)
                .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', x)
                    .attr('y', y)
                    .attr('dy', ++lineNumber * lineHeight + dy + 'em')
                    .text(word);
            }
        }
    });
}

---

下面是复制此操作的方法。

只是不要增加lineHeight变量

.attr('dy', ++lineNumber * lineHeight + dy + 'em')  // add a newline multiple times
.attr('dy', lineHeight + dy + 'em') // adds only one new line

var treeData={
'name'：'Good Short Label'，
“父项”：“null”，
‘儿童’[
{'name'：'Very Very Very Good Wapped Label'}，
{'name'：'Very-Very-Very-Very-Very-Very-Very-Very-Long-Label-With-Extra-New-Line'}，
{'name'：'Very-Very-Very-Very-Very-Very-Very-Very-Very-Very-Very-Very-Very-Very-Very-Very-Very-Very-Very-Very-Very-Very-Very-Very-Very-Very-ver
]
};
VarMargin={顶部：20，右侧：120，底部：20，左侧：200}；
变量宽度=950-margin.right-margin.left；
变量高度=800-margin.top-margin.bottom；
var i=0；
var持续时间=750；
变种根；
var tree=d3.layout.tree（）.size（[height，width]）；
var diagonal=d3.svg.diagonal（）
.投影（功能（d）{
返回[d.y，d.x]；
});
var svg=d3.select（#tree'）.append（'svg'））
.attr（'width'，width+margin.right+margin.left）
.attr（'height'，height+margin.top+margin.bottom）
.append（'g'）
.attr（'transform'，'translate（'+margin.left+'，'+margin.top+'））；
根=treeData；
root.x0=高度/2；
root.y0=0；
更新（根）；
d3.选择（self.frameElement）.style（'height'，'800px'）；
函数更新（源）{
//计算新的树布局。
var nodes=tree.nodes（root.reverse（）；
var links=tree.links（节点）；
//为固定深度进行规格化。
nodes.forEach（函数（d）{
d、 y=d.深度*180；
});
//更新节点…
var node=svg.selectAll（'g.node'）
.数据（节点、功能（d）{
返回d.id | |（d.id=++i）；
});
//在父节点的上一个位置输入任何新节点。
var nodeEnter=node.enter（）.append（'g'）
.attr（'类'，'节点'）
.attr（'transform'，函数（d）{
返回“translate（'+source.y0+'，'+source.x0+'）；
})
.on（'点击'，点击）；
nodeEnter.append（'circle'））
.attr（'r'，1e-6）
.样式（“填充”，功能（d）{
返回d.“儿童”？“ccff99”：“fff”；
});
nodeEnter.append（'text'）
.attr（'x'，函数（d）{
返回d.children | | d.| U儿童？-13:13；
})
.attr（'dy'，'.35em'））
.attr（'text-anchor'，函数（d）{
返回d.children | | d.| u children？'end'：'start'；
})
.文本（功能（d）{
返回d.name；
})
.呼叫（wrap，150）
.样式（“填充不透明”，1e-6）
.attr（'类'，函数（d）{
如果（d.url！=null）{
返回'hyper'；
}
})
.on（'点击'）功能（d）{
$（'.hyper'）.attr（'style'，'font-weight:normal'）；
d3.选择（this）.attr（'style'，'font-weight:bold'）；
})
;
//将节点转换到其新位置。
var nodeUpdate=node.transition（）
.持续时间（持续时间）
.attr（'transform'，函数（d）{
返回“translate”（“+d.y+”，“+d.x+”）；
});
节点更新。选择（'圆圈'）
.attr（'r'，10）
.样式（“填充”，功能（d）{
返回d.“儿童”？“ccff99”：“fff”；
});
nodeUpdate.select（'text'）
.样式（“填充不透明度”，1）；
//将退出节点转换到父节点的新位置。
var nodeExit=node.exit（）.transition（）
.持续时间（持续时间）
.attr（'transform'，函数（d）{
返回“translate（'+source.y+'，'+source.x+'）；
})
.remove（）；
nodeExit.select（'circle'）
.attr（'r'，1e-6）；
nodeExit.select（'text'）
.样式（“填充不透明度”，1e-6）；
//更新链接…
var link=svg.selectAll（'path.link'）
.数据（链接、功能（d）{
返回d.target.id；
});
//在父对象的上一个位置输入任何新链接。
link.enter（）.insert（'path'，'g'）
.attr（'class'，'link'）
.attr（'d'，函数（d）{
var o={x:source.x0，y:source.y0}；
返回对角线（{source:o，target:o}）；
});
//过渡链接到他们的新位置。
link.transition（）
.持续时间（持续时间）
.attr（'d'，对角线）；
//将退出节点转换到父节点的新位置。
link.exit（）.transition（）
.持续时间（持续时间）
.attr（'d'，函数（d）{
var o={x:source.x，y:source.y}；
返回对角线（{source:o，target:o}）；
})
.remove（）；
//将旧位置隐藏起来，以便过渡。
nodes.forEach（函数（d）{
d、 x0=d.x；
d、 y0=d.y；
});
}
//在单击时切换子项。
功能点击（d）{
如果（d.儿童）{
d、 _children=d.children；
d、 children=null；
}否则{
d、 儿童=d.\U儿童；
d、 _children=null；
}
更新（d）；
}
函数换行（文本、宽度）{
text.each（函数（）{
变量文本=d3。选择（此），
words=text.text（）.split（/\s+/）.reverse（），
单词
行=[]，
行号=0，
线宽=1.1，//ems
x=text.attr（'x'），
y=text.attr（'y'），
dy=0，//parseFloat（text.attr（'dy'）），
tspan=text.text（空）
.append（'tspan'）
.attr（'x'，x）
.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（“”））；
行=[字]；