Layout d3图形布局-箭头和箭头

关于如何根据节点的半径移动有向图中的箭头，我已经看到了几个问题，但在我的示例中，我不知道如何进行移动：

---

将数据绑定中的节点半径保存到节点

node.append("circle")
    .attr("r", function(d) { 
        d.radius = (10 + d.users/250); 
        return d.radius; 
    })
    .style("fill", function (d) {
        return color(d.group);
     });

现在，在tick函数中更新链接，如下所示

 link.attr("x1", function (d) {
    return d.source.x;
 })
 .attr("y1", function (d) {
    return d.source.y;
 })
 .attr("x2", function (d) {
    var diffX = d.target.x - d.source.x;  
    var diffY = d.target.y - d.source.y;
    var pathLength = Math.sqrt((diffX * diffX) + (diffY * diffY));
    var  offsetX = (diffX * d.target.radius) / pathLength;          
    return d.target.x-offsetX;
 })
 .attr("y2", function (d) {
     var diffX = d.target.x - d.source.x;   
     var diffY = d.target.y - d.source.y;
     var pathLength = Math.sqrt((diffX * diffX) + (diffY * diffY));
     var offsetY = (diffY * d.target.radius) / pathLength;
     return d.target.y-offsetY;
 });

希望这有帮助。

这是小提琴：

它可能需要tweeking，但基本上你必须计算出节点中心到外部的差值，然后得到两个节点之间的向量，以向下移动箭头。这使用了毕达哥拉斯的理论

c=sqrt（a^2+b^2）

以下是代码的主要部分：

function getVector(d) {
  var x1 = d.target.x;
  var y1 = d.target.y;
  var x2 = d.source.x;
  var y2 = d.source.y;

  var a = x1 - x2; //difference in x
  var b = y1 - y2; //difference in y
  var c = Math.sqrt((a * a) + (b * b)); //single vector
  var nodeRadius;
  node.filter(function(e) {
    return e.name === d.target.name; //return the links target
  }).each(function(n,i) {

    nodeRadius = 10 + n.users / 250 //as you had before, you could set this where you give it to the node
  });

  var vectorX = a / (c / nodeRadius );
  var vectorY = b / (c / nodeRadius );
  var thisVector = [vectorX, vectorY];
  return thisVector;
}

然后在目标的x和y方向上使用它

  .attr("x2", function(d) {

      var thisVector = getVector(d);

      return d.target.x - thisVector[0];
    })
    .attr("y2", function(d) {
      var thisVector = getVector(d);

      return d.target.y - thisVector[1];
    });

请注意，这样链接就不会指向中心，而是指向外部。因此，实际上这种方式并不是沿着链接向下移动箭头，而是指向节点外部的链接反过来移动箭头

  .attr("x2", function(d) {

      var thisVector = getVector(d);

      return d.target.x - thisVector[0];
    })
    .attr("y2", function(d) {
      var thisVector = getVector(d);

      return d.target.y - thisVector[1];
    });