Anychart固定布局网络图仅显示最后一条边问题求助

问题出在你定义的边数据上——所有边的id属性都是空字符串。

Anychart在处理网络图的边数据时，会将id作为每条边的唯一标识符。当多条边使用相同（或空）的id时，后定义的边会覆盖之前的边，最终只会保留最后一条边的渲染结果。

解决方法 #

给每条边分配一个唯一的id值即可，比如使用序号、或者由from和to拼接的字符串，确保每个id不重复。修改后的边数据示例如下：

edges: [
    { id: 'edge-admin-second', from: 'admin@myorg.com', to: 'secondadmin@myorg.com' },
    { id: 'edge-admin1-admin', from: 'admin1@myorg.com', to: 'admin@myorg.com'},
    { id: 'edge-admin1-admin10', from: 'admin1@myorg.com', to: 'admin10@myorg.com' },
    { id: 'edge-admin1-vishal1', from: 'admin1@myorg.com', to: 'vishal1@myorg.com' }
]

修改后的完整代码 #

anychart.onDocumentReady(function ()
{
  // create data
  const data = {
    nodes: [
        { id: "admin@myorg.com", x: 100, y: 100 },
        { id: "secondadmin@myorg.com", x: 100, y: 200 },
        { id: "admin1@myorg.com", x: 200, y: 100 },
        { id: "admin10@myorg.com", x: 200, y: 200 },
        { id: "vishal1@myorg.com", x: 300, y: 100 }
    ],
    edges: [
        { id: 'edge-admin-second', from: 'admin@myorg.com', to: 'secondadmin@myorg.com' },
        { id: 'edge-admin1-admin', from: 'admin1@myorg.com', to: 'admin@myorg.com'},
        { id: 'edge-admin1-admin10', from: 'admin1@myorg.com', to: 'admin10@myorg.com' },
        { id: 'edge-admin1-vishal1', from: 'admin1@myorg.com', to: 'vishal1@myorg.com' }
    ]
  };

  // create a chart and set the data
  const chart = anychart.graph(data);
  
  // set chart layout
  chart.layout().type("fixed");

  // set chart title
  chart.title("Network Graph: Basic Sample");

  // set container id
  chart.container("container");

  // draw chart
  chart.draw();
});

这样修改后，所有边都会被正确渲染，不会出现覆盖的情况。

内容的提问来源于stack exchange，提问作者Mayank Rangari