我正在尝试更改每个路径
,以便它们从每个矩形的右侧开始并连接到左侧。目前,它们似乎“穿过”矩形,并在矩形内部的某个位置有一个起点/终点,而不是补偿矩形
的大小。
我尝试过操纵此代码:
var diagonal = d3.svg.diagonal()
.source(function (d) { return { "x": d.source.y, "y": d.source.x }; })
.target(function (d) { return { "x": d.target.y - 10, "y": d.target.x }; })
.projection(function (d) { return [d.y + 0, d.x + 0];
});
但这只会以灾难告终,但我相信答案就在那里。
这是脚本的 JSFiddle http://jsfiddle.net/ra26wnbb/ .
更新 我查看过D3 tree square node not in desired position但我不确定它是否适用于我的文本换行。
最佳答案
首先,在 wrap()
内部的工作完成后,您需要将结果高度存储在文本的基准上:d.height = 19 * (lineNumber + 1) ;
。这样,无论需要什么,都可以使用高度。例如,您可以使用它从 wrap()
外部设置 rect
高度,而不是 parentNode.children[0]
事物,这是更好的关注点分离。无论如何,这就是 wrap()
最终的结果:
function wrap(text, width) {
text.each(function (d) { // DIFF add param d
var text = d3.select(this),
// DIFF: use datum to get name, instead of element text
words = d.name.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);
}
}
// DIFF: store the height via the datum, d
d.height = 19 * (lineNumber + 1);
d3.select(this.parentNode.children[0]).attr('height', 19 * (lineNumber + 1));
});
}
});
现在您已经有了d.height
,您可以使用它来计算对 Angular 线端点的必要偏移。
// calculate source and target offsets
// d.height gets set by the wrap() function
var diagonal = d3.svg.diagonal()
.source(function (d) {
return {
"x": d.source.x + d.source.height / 2,
"y": d.source.y + 150
};
})
.target(function (d) {
return {
"x": d.target.x + d.target.height / 2,
"y": d.target.y
};
})
.projection(function (d) { return [d.y + 0, d.x + 0];
});
关于javascript - 将链接附加到 D3 树布局中矩形的一侧,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28685146/