Sigma.js中创建方形节点失败：配置后仍显示圆形求排查

你的问题核心很明确：你把自定义的square节点类型绑定到了NodeCircleProgram——这个程序本身就是用来渲染圆形节点的，所以不管怎么设置节点type为square，最终显示的还是圆形。

正确的解决步骤： #

1. 导入内置的方形节点渲染程序
   如果你使用的是Sigma.js v2版本，库本身提供了NodeSquareProgram用来渲染方形节点，确保你已经导入了这个类：

   import { Sigma, NodeSquareProgram, NodeCircleProgram, EdgeArrowProgram, EdgeCurvedArrowProgram } from "sigma";
   

2. 修改渲染器配置
   在nodeProgramClasses中，把square类型关联到NodeSquareProgram，而不是NodeCircleProgram：

   const renderer = new Sigma(graph, container, {
     allowInvalidContainer: true,
     defaultEdgeType: "straight",
     defaultNodeType: "square",
     nodeProgramClasses: {
       square: NodeSquareProgram, // 这里改成NodeSquareProgram
       circle: NodeCircleProgram
     },
     edgeProgramClasses: {
       straight: EdgeArrowProgram,
       curved: EdgeCurvedArrowProgram
     }
   })
   

3. 确认节点类型设置
   你添加节点时指定type: "square"的代码是正确的，保持即可：

   myNodes.forEach(value => {
     graph.addNode(value.key, {
       forceLabel: true,
       label: value.label,
       x: value.col,
       y: value.row,
       size: value.size,
       url: value.url,
       type: "square"
     })
   })
   

额外说明 #

如果需要自定义方形的样式（比如圆角、边框等），你可以基于NodeSquareProgram扩展或者自己编写自定义的WebGL程序，但对于基础的方形需求，使用内置的NodeSquareProgram就足够了。

内容的提问来源于stack exchange，提问作者Charnel Clamosa