多年来一直在努力使用矩形而不是圆形创建水平树布局，并将文本换行到这些矩形。我所做的一切似乎都没有用，我已经尝试了this code但是无论是谁做了它都没有做出关键的一步，在行之前定义变量d
if (d.name.length > 26)阻止整个脚本运行。
我一直在尝试使用http://d3plus.org/中的d3plus.js来将文本换行到rect个标签中，但它实际上没有工作一半时间，似乎需要像一个click函数才能工作。还考虑使用this example作为文本包装的指南。
在我的研究中，我没有发现任何人在一个图表中完成了水平，矩形和包装文本的组合。 此外，我是一个d3菜鸟，所以所有的帮助表示赞赏。
这是JSFiddle。
以下是我正在使用的当前代码：
var w = 960,
h = 2000,
i = 0,
duration = 500,
root;
var tree = d3.layout.tree()
.size([h, w - 160]);
var diagonal = d3.svg.diagonal()
.projection(function(d) { return [d.y, d.x]; });
var vis = d3.select("#container").append("svg:svg")
.attr("width", w)
.attr("height", h)
.append("svg:g")
.attr("transform", "translate(40,0)");
root = treeData[0];
root.x0 = h / 2;
root.y0 = 0;
update(root);
function update(source) {
// Compute the new tree layout.
var nodes = tree.nodes(root).reverse();
// Update the nodes…
var node = vis.selectAll("g.node")
.data(nodes, function(d) { return d.id || (d.id = ++i); });
var nodeEnter = node.enter().append("svg:g")
.attr("class", "node")
.attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; });
// Enter any new nodes at the parent's previous position.
nodeEnter.append("svg:rect")
.attr("width", 150)
.attr("height", function(d) { return (d.name.length > 30) ? 38 : 19;})
.attr("y",-11)
.attr("rx",2)
.attr("ry",2)
.style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; })
.on("click", click);
if (d.name.length > 26) {
nodeEnter.append("svg:text")
.attr("x", function(d) { return d._children ? -8 : 8; })
.attr("y", 3)
.text(function(d) { return d.name; });
} else {
nodeEnter.append("svg:text")
.attr("x", function(d) { return d._children ? -8 : 8; })
.attr("y", 3)
.append("svg:tspan")
.text(function(d) { return d.name.slice(0,26); })
.append("svg:tspan")
.attr("x", function(d) { return d._children ? -8 : 8; })
.attr("y",15)
.text(function(d) { return d.name.slice(26); });
}
}
// Transition nodes to their new position.
nodeEnter.transition()
.duration(duration)
.attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })
.style("opacity", 1)
.select("rect")
.style("fill", "lightsteelblue");
node.transition()
.duration(duration)
.attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })
.style("opacity", 1);
node.exit().transition()
.duration(duration)
.attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; })
.style("opacity", 1e-6)
.remove();
// Update the links…
var link = vis.selectAll("path.link")
.data(tree.links(nodes), function(d) { return d.target.id; });
// Enter any new links at the parent's previous position.
link.enter().insert("svg:path", "g")
.attr("class", "link")
.attr("d", function(d) {
var o = {x: source.x0, y: source.y0};
return diagonal({source: o, target: o});
})
.transition()
.duration(duration)
.attr("d", diagonal);
// Transition links to their new position.
link.transition()
.duration(duration)
.attr("d", diagonal);
// Transition exiting nodes to the parent's new position.
link.exit().transition()
.duration(duration)
.attr("d", function(d) {
var o = {x: source.x, y: source.y};
return diagonal({source: o, target: o});
})
.remove();
// Stash the old positions for transition.
nodes.forEach(function(d) {
d.x0 = d.x;
d.y0 = d.y;
});
}
// Toggle children on click.
function click(d) {
if (d.children) {
d._children = d.children;
d.children = null;
} else {
d.children = d._children;
d._children = null;
}
update(d);
}
d3.select(self.frameElement).style("height", "2000px");
和我的json一样：
var treeData = [
{
"name": "Do trainees require direction as to what to do or how to do the task (either before they start or while they are completing it?",
"children": [
{
"name": "Can they satisfactorily complete the task assigned to them?",
"children": [
{
"name": "Rating level 4",
"parent": "A",
},
{
"name": "How many problems / queries are there that still need to be addressed / resolved to be able to satisfactorily complete the task?",
"children": [
{
"name": "Are problems / queries fundamental to the completion of the task at hand?",
"children": [
{
"name": "Rating level 4",
},
{
"name": "Can the problems be resolved by the trainee (after receiving guidance)?",
"children": [
{
"name": "Rating level 3",
},
{
"name": "Can the problems be resolved by the trainee (after receiving guidance)?",
"children": [
{
"name": "Rating level 2",
},
{
"name": "Rating level 1",
}
]
}
]
}
]
},
{
"name": "Are problems / queries fundamental to the completion of the task at hand?",
}
]
}
]
},
{
"name": "Can they satisfactorily complete the task assigned to them?",
"children": [
{
"name": "Rating 1",
},
{
"name": "Rating 2",
},
{
"name": "Rating 3",
},
{
"name": "Rating 4",
}
]
}
]
}];
答案 0 :(得分：1)
您的代码在此行引发错误：
if (d.name.length > 26) {
d未定义。当d3代码引用d时，它通常在数据绑定的范围内。在代码中的这个位置，您没有循环绑定，例如：
nodeEnter.append("text")
.attr("x", function(d) {
return d._children ? -8 : 8;
})
.attr("y", 3)
.attr("dy", "0em")
.text(function(d) {
return d.name; // d is defined from the binding
});
那就是说，我喜欢你链接的wrap功能。所以像上面一样添加你的text然后包装文本：
wrap(d3.selectAll('text'),150);
这里是对包装的快速修改，也会调整你的大小：
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);
}
}
// find corresponding rect and reszie
d3.select(this.parentNode.children[0]).attr('height', 19 * (lineNumber+1));
});
}
示例here。