VisJS 网络图不稳定并在圆圈中移动

Question

我正在尝试使用 visjs 创建网络图，但问题是它适用于一组节点和边，但不适用于另一组。

数据（节点和边）可能会有所不同，所以我可以提供通用设置吗？

在给定的示例中，图形一直在圆周上移动，并且需要很长时间才能稳定下来。谁能帮我解决这个问题？

示例： https://jsfiddle.net/aqarain92/eL1qt58r/16/

我正在使用以下 options

const options = {
      nodes: {
        shape: "dot",
        scaling: {
          min: 3,
          max: 70
        }
      },
      edges: {
        arrows: { to: { enabled: false } },
        width: 1,
        color: {
          color: 'gray',
          highlight: 'black'
        },
        smooth: { type: "continuous", roundness: 0 }
      },
      groups: {
        authentic: { color: 'blue' },
        inauthentic: { color: 'purple' },
        parent: { color: 'black' }
      },
      layout: { improvedLayout: false },
      physics: {
        forceAtlas2Based: {
          gravitationalConstant: -26,
          centralGravity: 0.005,
          springLength: 100,
          springConstant: 0.04
        },
        maxVelocity: 146,
        solver: "forceAtlas2Based",
        timestep: 0.35,
        stabilization: { iterations: 200 }
      },
      interaction: {
        tooltipDelay: 200,
        hideEdgesOnDrag: true,
        hideEdgesOnZoom: true
      }
    };

相同的选项适用于不同的节点和边集。

Answer 1

如果还不算太晚，这里是您网络的稳定版本：

https://jsfiddle.net/8nowe7c4/

我稍微更改了你的选项：

const options = {
  nodes: {
    shape: "dot",
    scaling: {
      min: 3,
      max: 70
    }
  },
  edges: {
    arrows: { to: { enabled: false } },
    width: 1,
    color: {
      color: 'gray',
      highlight: 'black'
    },
    smooth: { type: "continuous", roundness: 0 }
  },
  groups: {
    authentic: { color: 'blue' },
    inauthentic: { color: 'purple' },
    parent: { color: 'black' }
  },
  layout: { improvedLayout: false },
  physics: {
    forceAtlas2Based: {
      gravitationalConstant: -126,
      springLength: 200,
      springConstant: 0.01
    },
    maxVelocity: 50,
    solver: "forceAtlas2Based",
    timestep: 0.35,
    stabilization: true
  },
  interaction: {
    tooltipDelay: 200,
    hideEdgesOnDrag: true,
    hideEdgesOnZoom: true
  }
};

您可以根据需要调整参数。

VisJS 网络图不稳定并在圆圈中移动

VisJS Network Graph not stabilizing and moving in circle

javascript

reactjs

vis.js

react-vis