Question

我已经看到了几个关于如何根据节点的半径在有向图中移动箭头的问题，但我无法弄清楚如何在我的例子中做到这一点：https://jsfiddle.net/Lx58yux4/

{{1}}

Answer 1

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

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

现在，在滴答功能中更新如下所示的链接。

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

希望这有帮助。

Answer 2

这是小提琴： https://jsfiddle.net/Lx58yux4/2/

它可能需要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];
    });

请注意，链接不会转到中心，而是转到外面。所以这种方式确实不会将箭头向下移动，而是指向节点外部的链接，而这些链接又会移动箭头。

d3图形布局 - 箭头

2 个答案: