React中GoJS设置链接strokeWidth出现黑块，求正确加粗方案

问题根源 #

你之前的操作有两个问题：

• 属性拼写错误：strgokeWidth 应为 strokeWidth
• 冗余添加go.Shape：GoJS链接默认自带主路径（Link.path），额外加多个Shape会导致渲染叠加，出现黑块

正确实现方案 #

方案1：直接配置主路径的线条厚度 #

不需要额外添加Shape，在链接模板里直接设置主路径的strokeWidth即可：

const linkTemplate = $(go.Link,
  // 主路径直接设置线条厚度和颜色
  $(go.Shape, { strokeWidth: 5, stroke: "#333" }),
  // 如需箭头，可添加对应的Shape
  $(go.Shape, { toArrow: "Standard", stroke: "#333", fill: "#333" })
);

方案2：动态调整线条厚度（如交互场景） #

如果需要在鼠标事件等场景下动态修改，直接操作链接的主路径即可，不会出现黑块：

// 示例：点击链接时增粗线条
myDiagram.addDiagramListener("ObjectSingleClicked", (e) => {
  const target = e.subject;
  if (target instanceof go.Link) {
    target.path.strokeWidth = 8; // 直接修改主路径的strokeWidth
  }
});

避坑说明 #

你之前添加两个go.Shape的做法是多余的，GoJS的链接主路径已经负责线条渲染，多个Shape叠加会在路径的转角、连接点处产生渲染异常（黑块），只保留一个主路径Shape即可实现正常的粗线条效果。

内容的提问来源于stack exchange，提问作者Akila Uyanwatta