AnyChart JS网络图节点重叠：如何设置节点间距？

问题 #

我加载JSON文件并将其绘制成网络图，以可视化实体间的关系。数据包含约60个关系，我通过以下JavaScript代码成功绘制：

fetch('data.json')
        .then((response) => response.json())
        .then((jsonData) => {
          const dataSample = JSON.parse(jsonData);
          const nodes = dataSample.relation.map((relation) => ({
            id: relation.target_relation,
            relation_type: relation.relation_type,
          }));

          nodes.push({
            id: dataSample.party_source,
            relation_type: '-',
          });

          const edges = dataSample.relation.map((relation) => ({
            from: dataSample.party_source,
            to: relation.target_relation,
            relation_type: relation.relation_type,
          }));

          // graph data
          const data = {
            nodes,
            edges,
          };

          const chart = anychart.graph(data);

          // node configuration
          const configNodes = chart.nodes();
          configNodes.normal().height(20);
          configNodes.hovered().height(25);

          configNodes.tooltip().useHtml(true);
          configNodes.tooltip().format(`Party ID: {%id}`);

          // edge configuration
          const configEdges = chart.edges();
          configEdges.labels().enabled(true);
          configEdges.labels().format('{%relation_type}');
          configEdges.labels().fontSize(12);
          configEdges.labels().fontColor('black');
          configEdges.labels().fontWeight(500);

          configEdges.tooltip().useHtml(true);
          configEdges
            .tooltip()
            .format(`Party Source: {%from}<br>Party Target: {%to}`);
          configEdges.arrows({
            enabled: true,
            size: 8,
          });

          configEdges.stroke({
            color: '#7998FF',
            thickness: '1.5',
          });

          chart.listen('mouseOver', function (e) {
            // change the cursor style
            document.body.style.cursor = 'pointer';
          });

          chart.listen('mouseOut', function (e) {
            // set the default cursor style
            document.body.style.cursor = 'auto';
          });

          // chart behaviour
          chart.container('container');

          chart.draw();
        });

但网络图中的节点出现重叠或未合理分隔的问题。我查阅了网络图的文档但未找到设置节点间距的API函数，请问如何增加节点间距避免重叠？是否只有小数据量才能生成正常的网络图？

解决方法 #

1. 调整力导向布局参数 #

AnyChart默认使用力导向布局，你可以通过修改斥力、引力参数来拉开节点间距：

// 在chart.draw()前添加以下配置
chart.layout().type('force');
chart.layout().force().repulsion(250); // 增大斥力，数值越高节点排斥越强
chart.layout().force().gravity(0.05); // 降低引力，减少节点聚集程度
chart.layout().force().minLinkLength(60); // 设置边的最小长度，间接控制节点间距

repulsion和minLinkLength的数值可以根据实际效果调整，一般数值越大，节点间距越宽。

2. 切换到层次布局 #

你的数据是典型的星型结构（一个中心节点连接所有子节点），用层次布局能完美解决重叠问题，还能直接设置节点间距：

// 替换布局类型为层次布局
chart.layout().type('hierarchical');
chart.layout().hierarchical().orientation('topbottom'); // 可选布局方向：topbottom/leftright等
chart.layout().hierarchical().nodeSpacing(50); // 同层级节点间距
chart.layout().hierarchical().levelSpacing(80); // 不同层级（中心与子节点）的间距

这种布局会自动将中心节点放在顶层，子节点整齐排列在下方，完全不会重叠。

3. 优化节点尺寸 #

如果节点本身过小，也容易造成视觉上的重叠，你可以统一增大节点尺寸：

configNodes.normal().width(30).height(30);
configNodes.hovered().width(35).height(35);

关于数据量的说明 #

60个关系的数据量完全不算大，只要布局参数调整得当，几百个节点的网络图也能清晰展示。节点重叠的核心原因是布局参数未适配你的数据结构，和数据量没有直接关系。

内容的提问来源于stack exchange，提问作者mathias yeremia