AnyChart JS：网络图节点重叠答案

【问题标题】：AnyChart JS: Network Graph Nodes OverlappedAnyChart JS：网络图节点重叠
【发布时间】：2022-10-13 21:14:55
【问题描述】：

在这里，我加载 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 函数来执行该操作。它应该是一个小数据来产生一个合适的网络图吗？

【问题讨论】：

我有同样的问题。你找到解决办法了吗？

标签： javascript graph visualization anychart anychart-8.2

【解决方案1】：

看看他们在这个操场上的例子，他们正在使用它来影响布局。您是否尝试过使用迭代计数？

''' // 设置图表布局设置 chart.layout({ 迭代计数：0 }); '''

资源 https://playground.anychart.com/gallery/src/Network_Graph/Radial_Graph

【讨论】：