D3 力图奇数链接行为

问题描述

我发现了许多关于 d3 Force Graph color 的 SO 问题，但没有一个能解决我的问题。

D3 不尊重我为放置在某些链接上的箭头定义的颜色。

我有一个没有力的力图（节点仅在拖动时移动并且不“移动”其他节点）......我们只想将节点链接在一起形成“路径”。路径从一个节点开始，可选地通过一个或多个节点，然后在目标节点结束。只有最后一个链接有一个指向目标节点的箭头。线条都是相同的颜色来表示完整的路径，箭头也应该是那种颜色。

除了链接颜色外，一切正常。

我的链接集合中的每个链接都包含一个“组”属性（一个数字），用于将路径中的所有链接（从源到目标，可选地通过其他节点）分组。在链接类中有一个颜色数组。每个组或路径的链接线和相关箭头都应具有相同的颜色。

链接集合看起来正确，反映了正确的组 ID。但是，箭头颜色错误：

浅蓝色路径（最右侧），是第一条路径（第一个链接）。线条和箭头颜色正确。

紫色路径，从浅蓝色路径的源节点流向左下角是第二条路径，所有线的线颜色都正确，但箭头颜色错误（它使用灰色路径的颜色）

灰色路径是从右上角到上中心。所有线条颜色和箭头颜色都正确。

但是，如果我在组的所有链接上都显示箭头，它会变得更加奇怪。

这里，浅蓝色和灰色的路径仍然是正确的（尽管在每个节点上都显示了箭头）。然而，紫色的路径是错误的。它在该组中的第一个链接中为线条和箭头使用正确的颜色，但第二个链接为线条使用紫色，但为箭头使用浅蓝色（第一组的颜色）。所有剩余的链接都具有正确的线条颜色，但使用灰色（第三组的颜色）作为箭头。

在这两种情况/图像中，线条的颜色都是正确的。只是箭头不正确。

链接模型：

<svg:defs>
  <marker
    [attr.id]="link.id"
    viewBox="-0 -5 10 10"
    [attr.refX]="link.refX"
    refY="0"
    orient="auto"
    markerWidth="6"
    markerHeight="6"
    xoverflow="visible">
    <path 
      d="M 0,-5 L 10,0 L 0,5" 
      [attr.fill]="link.arrowColor">
    </path>
  </marker>
</svg:defs>
<svg:title class="linkHover" style="font-size: x-large !important;">
  {{ getLinkHoverText() }}
</svg:title>
<svg:path 
  class="link"
  [attr.stroke]="link.stroke"
  [attr.stroke-width]="link.strokeWidth"
  [attr.d]="link.d"
  [attr.marker-end]="link.markerId"
  [attr.stroke-dasharray]="link.strokeDashArray"
  (click)="onLinkClick()">
</svg:path>

来自我的link.ts

  get stroke(): string{
    console.log('Group Number = ' + this.groupNumber);
    console.log('Line color: ' + this.strokeNameList[this.groupNumber]);
    return this.strokeNameList[this.groupNumber];
  }

  get arrowColor(): string{
    console.log('Group Number = ' + this.groupNumber);
    console.log('Arrowhead color: ' + this.strokeNameList[this.groupNumber]);
    return this.strokeNameList[this.groupNumber];
  }

请注意，当我运行代码时，这些控制台日志（以及控制台记录链接集合）的输出都表明链接集合设置正确。

我们有一个 Angular 应用。

感谢任何建议

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）