d3.js - D3强制布局：旋转文字

Question

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

但是，当节点A被圆周运动拖动时，标签文本' < '突然翻转180度显示B < A。如何避免这种翻转，使A始终显示为< B？标签的旋转角度在tick()中计算：

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 + ')';

标签： d3.jssvg

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 + ')';
    }
  });