I want to avoid node and link overlaping

[PranayRandive]

ForceGraph2D(action: string) {
const N: any = this.gData['nodes'].length;
if (N > 0) {
const graphDiv: any = document.getElementById('graph');
this.Graph = ForceGraph()(graphDiv);
// Add collision and bounding box forces
this.Graph.nodeVal((d: any) => {
return d.nodeSize})
.width(graphDiv.offsetWidth + 15)
.height(graphDiv.offsetHeight)
.d3Force('collide', d3.forceCollide(2))
.d3Force('box', () => {
const SQUARE_HALF_SIDE: any = this.Graph.nodeVal() * N * 0.8;
this.gData['nodes'].forEach((node: any) => {
const x = node['x'] || 0, y = node['y'] || 0;
// bounce on box walls
console.log(node);

        if (Math.abs(x) > SQUARE_HALF_SIDE) { node.vx *= -1; }
        if (Math.abs(y) > SQUARE_HALF_SIDE) { node.vy *= -1; }
      });
    })
    .d3Force("link", d3.forceLink().distance(100))
    .d3Force("charge", d3.forceManyBody().strength(-200))
    .d3Force("center", d3.forceCenter(0, 0))
    .d3Force("x", d3.forceX().strength(0.1))
    .d3Force("y", d3.forceY().strength(0.1))
    .d3Force('collision', d3.forceCollide((d:any) => d.nodeSize))
    .onBackgroundRightClick(() => {
      this.menuItems = [
        { text: 'Refresh', iconCss: 'e-icons e-refresh-icn' },
        { text: 'Clear Canvas', iconCss: 'e-icons e-canvas-icn' }
      ]
    })
    .nodeColor((d: any) => {
      return d.color === undefined ? 'black' : d.color;
    })
    .linkColor((d: any) => {
      return d.color;
    })
    .linkCurvature((link: any) => {
      return link?.curvature;
    })
    .linkWidth((d: any) => {
      return 1;
    })

    .linkLineDash((link: any) => {
      return link.lineType === 'Dashed' ? [2, 2] : []
    })
    // Set directional arrows properties
    .linkDirectionalArrowLength((link: any) => {
      return link.lineType === 'Arrow' ? 4 : 0; // Example length
    })
    .linkDirectionalArrowColor((link: any) => {
      return link.color || '#000';
    })
    .linkDirectionalArrowRelPos(() => 1) // Arrow position relative to the end of the link

    .linkLabel((link: any) => {
      if (link != null) {
        return link?.linkClass ? link?.linkClass[0] : link?.source.linkClass[0]
      }
    })
    .onLinkRightClick((d: any) => {
      this.selectedLink = d;
      if (d !== null) {
        this.menuItems = [
          { text: 'Hide Link', iconCss: 'e-icons hide-icn' },
          { text: 'Delete Link', iconCss: 'e-icons e-delete-icn' },
        ]
      }
    })
    .nodeRelSize(4)
    .onNodeClick((node: any, event:any) => {
      this.selectedNode = node;
      const thisClick: any = new Date().getTime();
      let isDoubleClick: boolean = thisClick - this.lastClick < this.doubleClickThreshold;
      if (isDoubleClick) {
        this.sharedService.commonService('updateAsset', this.selectedNode);
      }
      this.lastClick = thisClick;
      if (event.shiftKey) {
        if (this.selectedNodes.has(node)) {
          this.selectedNodes.delete(node);
        } else {
          this.selectedNodes.add(node);
        }
        this.selectedNodesArray = Array.from(this.selectedNodes);
        if (this.selectedNodes.size == 2) {
          this.formInit();
          this.linkNodesForm.controls['sourceAssetName'].setValue(this.selectedNodesArray[0].name);
          this.linkNodesForm.controls['targetAssetName'].setValue(this.selectedNodesArray[1].name);
          this.linkNodesSidebar.show();
          this.selectedNodes.clear();
        }
      }
    })
    // For Node Label

    // For Right Click
    .onNodeRightClick((d: any, event: any) => {
      this.selectedNode = d;
      if (d !== null) {
        if (this.selectedNode.classGroup == 'Business Catalog') {
          this.menuItems = [
            { text: 'Show All', iconCss: 'e-icons show-all' },
            { text: 'Hide', iconCss: 'e-icons hide-icn' },
            { text: 'Delete', iconCss: 'e-icons e-delete-icn' },
            { text: 'Edit', iconCss: 'e-icons e-edit-icn' }
          ]
        }
        else {
          this.menuItems = [
            { text: 'Show All', iconCss: 'e-icons show-all' },
            { text: 'Hide', iconCss: 'e-icons hide-icn' },
            { text: 'Delete', iconCss: 'e-icons e-delete-icn' },
          ]
        }

        let Items: any[] = [];
        let containItems: any[] = [
          { text: 'Parent', iconCss: 'e-icons e-link' },
          { text: 'Child', iconCss: 'e-icons e-link' }
        ];
        if (d['linkClass']?.length > 0) {
          this.menuItems.push({ separator: true });
          d['linkClass'].map((element: any) => {
            if (element.toLowerCase() == 'contains') {
              Items.push({ text: element, iconCss: 'e-icons e-link', items: containItems })
            }
            else {
              Items.push({ text: element, iconCss: 'e-icons e-link', items: [] })
            }

          })
          this.menuItems.push({ text: 'Link', iconCss: 'e-icons e-link', items: Items })
        }
      }
    })
    // For Node Label
    .nodeCanvasObjectMode(() => `${action}`)
    .nodeCanvasObject((node: any, ctx: any, globalScale: any) => {
      ctx.beginPath();
      ctx.arc(node.x, node.y, node.nodeSize * 1.4, 0, 2 * Math.PI, false);
      ctx.lineWidth = 0.5;
      ctx.strokeStyle = node.stroke;
      ctx.fill();
      ctx.stroke();
      const label: string = node.name;
      const fontSize = 15 / globalScale;
      ctx.font = `${fontSize}px "Roboto", sans-serif`;
      const textWidth: any = ctx.measureText(label).width;
      const bckgDimensions: any = [textWidth, fontSize].map(n => n + fontSize * 0.2); // some padding
      // ctx.fillStyle = '#FFFFFF';
      ctx.fillStyle = (node?.contentType === 'LinkPage') ? '#e20074' : (node?.contentType === 'ClusterPage' ? node.stroke : '#FFFFFF');
      ctx.fillRect(node.x - bckgDimensions[0] / 2, node.y - bckgDimensions[1] / 2, ...bckgDimensions);
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';
      // ctx.fillStyle = node.multiLink ? (node.stroke === 'gray' ? '#a9a9a9' : '#ffffff') : (node.newKeyword ? '#00FF00' : ((node.stroke === '#ffffff') ? 'gray' : node.stroke));
      // ctx.fillStyle = node.multiLink ? (node.stroke === 'gray' ? '#f605fa' : node.stroke) : (node.newKeyword ? '#00FF00' : (node.stroke === 'gray' ? '#f605fa' : node.stroke));
      ctx.fillStyle = node.stroke;
      ctx.fillText(label, node.x, node.y);
    })
    .autoPauseRedraw(false)
    .cooldownTime(Infinity)
    .cooldownTicks(1) // Adjust to taste
    // Add data
    .graphData(this.gData);
}

}

[PranayRandive]

@vasturiano please let me know what i have did wrong

[vasturiano]

@PranayRandive thanks for reaching out.

It's difficult to have a good understanding of your issue without further info, and a simple functional reproducing example. Could you please create one on https://codepen.io/ or https://codesandbox.io/ ?