如何在节点之间添加冲突..

Question

我想在节点之间添加碰撞，一个移动节点的实例猛烈撞击另一个节点。因为这里一个节点与另一个节点重叠。我不知道为什么两个节点之间重叠，因为我应用了碰撞。

然后我已经在尝试此操作，下面的代码无法正常工作，因此请告诉我如何调整冲突，而无需重新调整大小。

function getGraphDataSets () {
  var width = 960,
    height = 500

  function shouldShowLink (link, baseNode) {
    return link.source === baseNode || link.target === baseNode
  }

  let highlightLink = null
  const imgs = ['../AzureIcons/ResourceGroup_COLOR.png', '../AzureIcons/Azure Virtual Machine_COLOR.png', '../AzureIcons/Azure Virtual Network_COLOR.png', '../AzureIcons/NetworkInterface.png', '../AzureIcons/publicIpAdress.png', '../AzureIcons/Network Security Group_COLOR.png', 'all.png', 'all.png', 'all.png', 'all.png', 'all.png']
  const colors = ['#D2691E', '#FF0000', '#FFFF00', '#00FF00', '#00FFFF', '#0000FF', '#808080', '#808000', '#008000', '#008080', '#f0ffff', '#C0C0C0', '#512E5F', '#F4D03F', '#f0ffff']
  const linkLength = [2, 150, 150, 150, 150, 150, 150, 150, 150, 150, 150, 150, 150, 150]
  const NODE_REL_SIZE = 1
  const controls = { 'BackGroundColor': 'aqua' }
  const controls2 = { 'linkColor': 'aqua' }
  var resourceData = []
  // var force = d3.layout.force(); 
  const gui = new dat.GUI()

  gui.add(controls, 'BackGroundColor', ['aqua', 'lightsteelblue', 'lavender', 'snow', 'gainsboro', 'tan', 'gainsboro', 'navajowhite', 'floralwhite', 'lightyellow', 'silver', 'peru', 'rosybrown', 'cornsilk', 'lightslategray', 'slategray', 'seashell', 'azure', 'honeydew', 'aliceblue', 'pink', 'plum', 'mediumpurple', 'powderblue', 'palegreen', 'darkseagreen', 'olive', 'lemonchiffon', 'moccasin'])
    .onChange(orientation => Graph && Graph.backgroundColor(orientation))

  const controls3 = { 'DAG Orientation': 'null'}
  const gui3 = new dat.GUI()
  gui3.add(controls3, 'DAG Orientation', ['lr', 'td', 'zout', 'radialout'])
    .onChange(orientation => Graph && Graph.dagMode(orientation))

  const loadBlocks = function (Graph) {
    // qwest.get('../datasets/sample.json').then((_, data) => {
    qwest.get('../datasets/realData.json').then((_, data) => {


      var simulation = d3.forceSimulation(data.nodes)
        .force('charge', d3.forceManyBody().strength(5))
        .force('center', d3.forceCenter(width / 2, height / 2))
        .force('collision', d3.forceCollide().radius(Math.random() * 25))


      // console.log(data.links)
      // filter ResouceGroup
      data.nodes.forEach(node => {
        node.name = `${node.id ? node.id + ': ' : ''}${node.discription || node.group}`
      })

      const linkForce = Graph
        .d3Force('link')
        .distance(link => link.value)

      Graph
        .linkWidth(2)
        .linkOpacity(0.5)
        .linkColor(link => link.vulnerability ? 'red' : 'grey')
        .nodeAutoColorBy('type')
        .backgroundColor('azure')
        .nodeAutoColorBy('id')
        .dagMode('td')
        .linkLabel(link => `
        <br><span style="background-color: #FFFFFF" class="text-highlighted"><font color="red" size="5">
        ${link.vulnerabilityStatus}
        </font>
        </span>
         `)
        .onLinkClick(link => {
          d3.select('h1').html(link.vulnerabilityStatus)
          d3.select('h2').html(link.vulnerabilityBrief)
        })
        .nodeLabel(node => `
        <br><span style="background-color: #FFE4C4" class="text-highlighted"><font color="black" size="2">
        ${node.id}
        </font>
        </span>
         `)
        .onNodeClick(node => {
          d3.select('h1').html(node.id)
          d3.select('h2').html(node.discription)
        })
        .enableNodeDrag(true)
        .nodeThreeObject(({ type }) => geometryAlgorithem(type))
        .graphData(data)
    })
  }
  // Node Filter
  const filterNode = { 'filterNode': 'Select Resource Filter' }
  const filterNodegui = new dat.GUI()
  filterNodegui.add(filterNode, 'filterNode', ['virtualMachine', 'storageAccount', 'resourceGroup', 'PaaSService', 'Networks', 'reset'])
    .onChange(filterNode => Graph && filterConfiguration(filterNode, Graph))

  return [loadBlocks]
}