React中使用DagreGraph设置边样式后箭头出现黑色背景问题排查

你的箭头出现黑色“背景”，本质是箭头的SVG路径默认带有黑色描边（stroke），你只设置了箭头的填充色（fill），没同步设置描边色，导致描边显露出黑色，看起来像背景。

修改方案： #

• 在每个链接的arrowheadStyle中补充stroke: blue样式，让描边色和填充色一致
• 移除第三个链接中多余的fill:"blue"属性（边是线条，fill属性对其无效）

修改后的links代码： #

var links = [
  {
    source: "1",
    target: "2",   
    config:{
      style:"stroke: blue; stroke-width: 2px;", 
      lineInterpolate:'basis', 
      arrowheadStyle:"fill: blue; stroke: blue;"      
    }
  },  
  {
    source: "2",
    target: "3",   
    config:{
      style:"stroke: blue; stroke-width: 2px;", 
      lineInterpolate:'basis', 
      arrowheadStyle:"fill: blue; stroke: blue;"
    }
  },
  {
    source: "1",
    target: "3",   
    config:{
      style:"stroke: blue; stroke-width: 2px;", 
      lineInterpolate:'basis', 
      arrowheadStyle:"fill: blue; stroke: blue;", 
      arrowhead:"vee"
    }
  }
];

原理说明： #

dagre-d3生成的箭头是SVG的<path>元素，默认会继承全局或库的默认描边样式（黑色）。通过在arrowheadStyle中同时设置fill和stroke为蓝色，就能让箭头整体呈现蓝色，消除黑色描边带来的“背景”视觉效果。

内容的提问来源于stack exchange，提问作者srisatyavennela 007