我有一个由D3构建的可折叠树。 这是JSFIDDLE:http://jsfiddle.net/mEyQW/57/
如您所见,当节点完全耗尽时,文本全部重叠。 我想添加新行来替换空格(可能有1或2)。例如:SDS 123将成为
SDS
123
我已经尝试过在堆栈溢出中找到的几个类似的答案,但仍然无法解决我的问题。 你能帮忙吗?由JSFIDDLE提出将不胜感激!!
nodeEnter.append("text")
.attr("x", function(d) { return d.children1 || d._children1 ? -10 : 10; })
.attr("dy", ".35em")
.attr("text-anchor", function(d) { return d.children1 || d._children1 ? "end" : "start"; })
.text(function(d) { return d.NickName ; })
.style("fill-opacity", 1e-6);
谢谢!
答案 0 :(得分:7)
我遇到了类似的问题所以我不得不做一些手工操作。首先,您需要一个实际上“包装”文本的函数:
function wordwrap(text, max) {
var regex = new RegExp(".{0,"+max+"}(?:\\s|$)","g");
var lines = [];
var line;
while ((line = regex.exec(text))!="") {lines.push(line);}
return lines
}
然后,您需要将此函数应用于每个文本元素。在你的代码中,我会这样写:
nodeEnter.append("text")
.attr("x", function(d) { return d.children1 || d._children1 ? -10 : 10; })
.attr("dy", ".35em")
.attr("text-anchor", function(d) { return d.children1 || d._children1 ? "end" : "start"; })
.style("fill-opacity", 1e-6)
.each(function (d) {
if (d.NickName!=undefined) {
var lines = wordwrap(d.NickName, 15)
for (var i = 0; i < lines.length; i++) {
d3.select(this).append("tspan")
.attr("dy",13)
.attr("x",function(d) {
return d.children1 || d._children1 ? -10 : 10; })
.text(lines[i])
}
}
});
最终结果如下:
当然,您应该花些时间调整每个文本元素的x
位置。
修改强> 一种更简单的方法是将wordwrap方法设为:
function wordwrap2(text) {
var lines=text.split(" ")
return lines
}
并按以下方式应用:
nodeEnter.append("text")
.attr("x", function(d) { return d.children1 || d._children1 ? -10 : 10; })
.attr("dy", ".35em")
.attr("text-anchor", function(d) { return d.children1 || d._children1 ? "end" : "start"; })
.style("fill-opacity", 1e-6)
.each(function (d) {
if (d.NickName!=undefined) {
var lines = wordwrap2(d.NickName)
for (var i = 0; i < lines.length; i++) {
d3.select(this).append("tspan")
.attr("dy",13)
.attr("x",function(d) {
return d.children1 || d._children1 ? -10 : 10; })
.text(lines[i])
}
}
});
这是最后一种方法的小提琴:http://jsfiddle.net/mEyQW/59/
希望这有帮助。
答案 1 :(得分:1)
我很难在逗号上分割一行,并将文本片段放在列表格式中。以下适应工作。
function splitoncomma(text) {
var lines=text.split(",") //splits text on comma
return lines
}
label.append("div")
.attr("class", "class_name")
.each(function (d) {
if (textValue(d)!==undefined) {
var lines = splitoncomma(textValue(d))
for (var i = 0; i < lines.length; i++) {
d3.select(this)
.append("text")
.append("tspan")
.style("float","left")// the float:left avoids default inline positioning
.text(lines[i])
}
}
左侧的样式浮动是避免默认内联放置所必需的。