D3 强制布局:旋转文本

Question

我正在使用一个用于在 d3 的力布局中旋转标签的示例。我正在尝试显示标签文本"><"，以便 A 始终显示在 B<。请参考小提琴：http://jsfiddle.net/xr3917ac/4/

但是，当以圆周运动拖动节点 A 时，标签文本"><"突然翻转 180 度，显示 B

const dsty = d.source.y - d.target.y;
let angle = Math.atan(dsty / (d.source.x - d.target.x)) * 180 / Math.PI;
return 'translate(' + [((d.source.x + d.target.x) / 2), ((d.source.y + d.target.y) / 2)] + ')rotate(' + angle + ')';

Answer 1

使用Math.atan2而不是Math.atan

labelLine.attr("transform", function(d) {
if (d) {
const dsty = d.source.y - d.target.y;
let angle = Math.atan2(dsty, (d.source.x - d.target.x)) * 180 / Math.PI;
return 'translate(' + [((d.source.x + d.target.x) / 2), ((d.source.y + d.target.y) / 2)] + ')rotate(' + angle + ')';
}
});