Javascript 在定向力布局中与图像重叠的链接

在我的定向力布局中，我使用的是图标而不是圆；当前，链接与图像/图标重叠。我希望链接在图像之前结束。然而，我看到在链接开始/结束后的圆圈，它没有重叠的圆圈

我调整了下面的return语句，但无法正确修复它

function tick() {
 link.attr("d", function(d) {
 var dx = d.target.x - d.source.x,
  dy = d.target.y - d.source.y,
  dr = Math.sqrt(dx * dx + dy * dy);
 return (      "M" +      d.source.x +      "," +      d.source.y +
  "A" +      dr +      "," +      dr +      " 0 0,1 " +
  d.target.x +      "," +      d.target.y    );
 });

 node.attr("transform", function(d) {
    return "translate(" + d.x + "," + d.y + ")";
 });
}

在

restart（）

函数中，在节点之前绘制链接，并使用没有内部透明度的图像

function restart() {
  link = link.data(links);
  link
    .enter()
    .append("path")
    .attr("class", "link")
    .attr("marker-end", "url(#arrow)");
  link.exit().remove();
  node = node.data(nodes);
  node
    .enter()
    .insert("g")
    .attr("class", "node")
    .call(force.drag);
  node
    .append("image")
    .attr("xlink:href", "https://github.com/favicon.ico")
    .attr("x", -8)
    .attr("y", -8)
    .attr("width", 16)
    .attr("height", 16);
  node
    .append("text")
    .attr("dx", 12)
    .attr("dy", ".35em")
    .text(function(d) {
      return d.id;
    });
  node.exit().remove();

  force.start();
}

---

在不影响元素顺序的情况下，避免这种情况的数学方法是计算偏移量，因此链接开始和结束于节点的边缘

在您的例子中，我们首先得到两个节点之间的角度：

var angle = Math.atan2(dx, dy);

然后我们计算偏移量：

var offsetX = radius * Math.cos(angle);
var offsetY = radius * Math.sin(angle);

最后在

d

属性中使用该值：

return ("M" + (d.source.x + offsetX) + "," + (d.source.y + offsetY) +
  "A" + dr + "," + dr + " 0 0,1 " + (d.target.x - offsetX) +
  "," + (d.target.y - offsetY)
);

以下是更改后的代码：

var宽度=500，
高度=400，
半径=8；
var fill=d3.scale.category20（）；
var links=[{源：“FH”，目标：“TP”}]；
变量节点=[
{id:“FH”，x:100，y:110}，
{id:“TP”，x:200，y:110}，
{id:“GW”，x:200，y:110}，
{id:“DB”，x:100，y:110}
]
变量映射={}
forEach（函数（d，i）{
map[d.id]=i；
})
links.forEach（函数（d）{
d、 source=map[d.source]；
d、 target=map[d.target]；
})
var-force=d3.0
.force（）
.尺寸（[宽度、高度]）
.节点（节点）
.链接（links）
.linkDistance（150）
。收费（-500）
.在（“滴答”，滴答）上；
var svg=d3
.选择（“正文”）
.append（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
var arrows=svg
.append（“svg:defs”）
.selectAll（“标记”）
.数据（[“箭头”]）
.输入（）
.附加（“标记”）
.attr（“id”，字符串）
.attr（“视图框”，“0-5 10”）
.attr（“参考文献”，第10页）
.attr（“参考文献”，0）
.attr（“markerWidth”，6）
.attr（“markerHeight”，6）
.attr（“方向”、“自动”）
.append（“路径”）
.attr（“d”，“M0，-5L10,0L0,5”）；
svg
.append（“rect”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
var nodes=force.nodes（），
links=force.links（），
node=svg.selectAll（“.node”），
link=svg.selectAll（“.link”）；
重启（）；
函数tick（）{
link.attr（“d”，函数（d）{
变量dx=d.target.x-d.source.x，
dy=d.target.y-d.source.y；
变量角度=数学常数2（dy，dx）；
var offsetX=半径*数学cos（角度）；
var offsetY=半径*数学sin（角度）；
dr=Math.sqrt（dx*dx+dy*dy）；
返回(
“M”+
（d.source.x+offsetX）+
"," +
（d.source.y+offsetY）+
“A”+
博士+
"," +
博士+
" 0 0,1 " +
（d.target.x-抵销）+
"," +
（d.target.y-抵销）
);
});
node.attr（“转换”，函数（d）{
返回“translate”（“+d.x+”，“+d.y+”）；
});
}
函数重新启动（）{
链接=链接数据（链接）；
链接
.输入（）
.append（“路径”）
.attr（“类”、“链接”）
.attr（“标记结束”、“url（#箭头）”）；
link.exit（）.remove（）；
节点=节点。数据（节点）；
节点
.输入（）
.插入（“g”）
.attr（“类”、“节点”）
.呼叫（强制拖动）；
节点
.append（“图像”）
.attr（“xlink:href，”https://github.com/favicon.ico")
.attr（“x”，-8）
.attr（“y”，-8）
.attr（“宽度”，16）
.attr（“高度”，16）；
节点
.append（“文本”）
.attr（“dx”，12）
.attr（“dy”，“.35em”）
.文本（功能（d）{
返回d.id；
});
node.exit（）.remove（）；
force.start（）；
}

#nodeConsole{
宽度：80%；
高度：1px；
字体系列：信使新；
填充：1px；
边框：3倍纯色灰色；
页边顶部：1px；
溢出：autao；
}
#连接节点{
宽度：80%；
字体系列：信使新；
填充：10px；
}
#SRC节点{
宽度：40%；
字体系列：信使新；
填充：8px；
}
#目标节点{
宽度：40%；
字体系列：信使新；
填充：8px；
}
直肠{
填充：无；
指针事件：全部；
}
.节点{
填写：#000；
}
.光标{
填充：无；
笔画：棕色；
指针事件：无；
}
.链接{
行程：#999；
}
.节点文本{
指针事件：无；
字体：10px无衬线；
}
路径链接{
填充：无；
行程：#666；
笔划宽度：1.5px；
}

---

<代码> 这个答案不考虑OPS路径会被不透明边缘的图像遮挡的事实。OP可以通过在每个节点上附加一个圆，为每个图像定义一个图案，然后将圆的填充应用于该图案，或者通过向后移动箭头来实现与d3noob相同的效果：。我发布的代码笔没有动态更正箭头的位置，我手动输入了位置。我进行了调整，使图标没有内部透明度。我只是用一个简单的16x16 png和一个不透明的圆圈试了一下。如果你仔细观察使用过的github图标，链接在ico文件的黑色部分不可见。谢谢@Gerardo，它看起来真的很棒！