1. Home
  2. Forum
  3. React - EJ 2
  4. Connector lines are overlapping nodes in diagram

Connector lines are overlapping nodes in diagram

Hi team,

I am implementing a Syncfunction diagram, but the connector lines are overlapping nodes. Could you guy help me with that? I put a screenshot & code below.

Thank you in advance!

Image_3177_1742514817249

import { createRoot } from 'react-dom/client';
import * as React from 'react';
import {
  ComplexHierarchicalTree,
  DataBinding,
  LineDistribution,
  DiagramComponent,
  ConnectionPointOrigin,
  Inject,
  DiagramConstraints,
  LineRouting,
  SnapConstraints,
  ConnectorBridging
} from '@syncfusion/ej2-react-diagrams';

import { registerLicense } from '@syncfusion/ej2-base';
registerLicense(
  ''
);

function diagramTemplate(props) {
  return (
    <div
      style={{
        border: '1px solid black',
        height: '100%',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
      }}
    >
      abc
    </div>
  );
}

const nodes = [
  {
    width: 170,
    height: 50,
    shape: {
      type: 'HTML',
    },
    id: 'node-9c05060d-8ff5-457e-bb69-b9f81039def5',
  },
  {
    width: 170,
    height: 50,
    shape: {
      type: 'HTML',
    },
    id: 'node-5fc2fd4e-d9e3-4969-92ec-af696bc95c2d',
  },
  {
    width: 170,
    height: 50,
    shape: {
      type: 'HTML',
    },
    id: 'node-7861f5e5-9bc8-4ca3-9c9d-5985f15c1386',
  },
  {
    width: 170,
    height: 50,
    shape: {
      type: 'HTML',
    },
    id: 'node-03319bb8-4ad1-4bc9-b71f-585f784cf721',
  },
  {
    width: 170,
    height: 50,
    shape: {
      type: 'HTML',
    },
    id: 'node-aefb689a-8dca-4a65-b93e-8842e7c24d72',
  },
  {
    width: 170,
    height: 50,
    shape: {
      type: 'HTML',
    },
    id: 'node-1ea3088d-af9d-4e13-8db2-61bfd237bd5c',
  },
  {
    width: 170,
    height: 50,
    shape: {
      type: 'HTML',
    },
    id: 'node-641308cf-e1e0-42d0-8199-3f9d45225334',
  },
  {
    width: 170,
    height: 50,
    shape: {
      type: 'HTML',
    },
    id: 'node-e7b98adf-dcbc-4576-a96d-acf4ca523964',
  },
  {
    width: 170,
    height: 50,
    shape: {
      type: 'HTML',
    },
    id: 'node-f8a2a41b-e992-460e-91b2-5abdcceed7a6',
  },
  {
    width: 170,
    height: 50,
    shape: {
      type: 'HTML',
    },
    id: 'node-3c56a5ff-1f00-4ba6-9e45-9a3075068b59',
  },
  {
    width: 170,
    height: 50,
    shape: {
      type: 'HTML',
    },
    id: 'node-32aa00e9-125f-4925-b527-aa74a1d54721',
  },
  {
    width: 170,
    height: 50,
    shape: {
      type: 'HTML',
    },
    id: 'node-52932097-4c9d-459d-9fcf-7e3742973ee0',
  },
  {
    width: 170,
    height: 50,
    shape: {
      type: 'HTML',
    },
    id: 'node-272b5692-982d-4d34-a0ce-a7e46ee09b92',
  },
  {
    width: 170,
    height: 50,
    shape: {
      type: 'HTML',
    },
    id: 'node-97717e2b-0360-4d6b-899a-5125e266fe97',
  },
  {
    width: 170,
    height: 50,
    shape: {
      type: 'HTML',
    },
    id: 'node-51fae793-1f2b-49ee-9cac-2cb2cebf695a',
  },
];

const connectors = [
  {
    sourceID: 'node-9c05060d-8ff5-457e-bb69-b9f81039def5',
    type: 'Orthogonal',
    cornerRadius: 5,
    targetDecorator: {
      shape: 'Arrow',
      height: 7,
      width: 7,
    },
    style: {
      strokeColor: '#6d6d6d',
    },
    targetID: 'node-5fc2fd4e-d9e3-4969-92ec-af696bc95c2d',
    id: 'connector_1',
  },
  {
    sourceID: 'node-9c05060d-8ff5-457e-bb69-b9f81039def5',
    type: 'Orthogonal',
    cornerRadius: 5,
    targetDecorator: {
      shape: 'Arrow',
      height: 7,
      width: 7,
    },
    style: {
      strokeColor: '#6d6d6d',
    },
    targetID: 'node-7861f5e5-9bc8-4ca3-9c9d-5985f15c1386',
    id: 'connector_2',
  },
  {
    sourceID: 'node-03319bb8-4ad1-4bc9-b71f-585f784cf721',
    type: 'Orthogonal',
    cornerRadius: 5,
    targetDecorator: {
      shape: 'Arrow',
      height: 7,
      width: 7,
    },
    style: {
      strokeColor: '#6d6d6d',
    },
    targetID: 'node-aefb689a-8dca-4a65-b93e-8842e7c24d72',
    id: 'connector_3',
  },
  {
    sourceID: 'node-03319bb8-4ad1-4bc9-b71f-585f784cf721',
    type: 'Orthogonal',
    cornerRadius: 5,
    targetDecorator: {
      shape: 'Arrow',
      height: 7,
      width: 7,
    },
    style: {
      strokeColor: '#6d6d6d',
    },
    targetID: 'node-1ea3088d-af9d-4e13-8db2-61bfd237bd5c',
    id: 'connector_4',
  },
  {
    sourceID: 'node-e7b98adf-dcbc-4576-a96d-acf4ca523964',
    type: 'Orthogonal',
    cornerRadius: 5,
    targetDecorator: {
      shape: 'Arrow',
      height: 7,
      width: 7,
    },
    style: {
      strokeColor: '#6d6d6d',
    },
    targetID: 'node-f8a2a41b-e992-460e-91b2-5abdcceed7a6',
    id: 'connector_5',
  },
  {
    sourceID: 'node-e7b98adf-dcbc-4576-a96d-acf4ca523964',
    type: 'Orthogonal',
    cornerRadius: 5,
    targetDecorator: {
      shape: 'Arrow',
      height: 7,
      width: 7,
    },
    style: {
      strokeColor: '#6d6d6d',
    },
    targetID: 'node-272b5692-982d-4d34-a0ce-a7e46ee09b92',
    id: 'connector_6',
  },
  {
    sourceID: 'node-e7b98adf-dcbc-4576-a96d-acf4ca523964',
    type: 'Orthogonal',
    cornerRadius: 5,
    targetDecorator: {
      shape: 'Arrow',
      height: 7,
      width: 7,
    },
    style: {
      strokeColor: '#6d6d6d',
    },
    targetID: 'node-3c56a5ff-1f00-4ba6-9e45-9a3075068b59',
    id: 'connector_7',
  },
  {
    sourceID: 'node-e7b98adf-dcbc-4576-a96d-acf4ca523964',
    type: 'Orthogonal',
    cornerRadius: 5,
    targetDecorator: {
      shape: 'Arrow',
      height: 7,
      width: 7,
    },
    style: {
      strokeColor: '#6d6d6d',
    },
    targetID: 'node-9c05060d-8ff5-457e-bb69-b9f81039def5',
    id: 'connector_8',
  },
  {
    sourceID: 'node-e7b98adf-dcbc-4576-a96d-acf4ca523964',
    type: 'Orthogonal',
    cornerRadius: 5,
    targetDecorator: {
      shape: 'Arrow',
      height: 7,
      width: 7,
    },
    style: {
      strokeColor: '#6d6d6d',
    },
    targetID: 'node-32aa00e9-125f-4925-b527-aa74a1d54721',
    id: 'connector_9',
  },
  {
    sourceID: 'node-52932097-4c9d-459d-9fcf-7e3742973ee0',
    type: 'Orthogonal',
    cornerRadius: 5,
    targetDecorator: {
      shape: 'Arrow',
      height: 7,
      width: 7,
    },
    style: {
      strokeColor: '#6d6d6d',
    },
    targetID: 'node-e7b98adf-dcbc-4576-a96d-acf4ca523964',
    id: 'connector_10',
  },
  {
    sourceID: 'node-52932097-4c9d-459d-9fcf-7e3742973ee0',
    type: 'Orthogonal',
    cornerRadius: 5,
    targetDecorator: {
      shape: 'Arrow',
      height: 7,
      width: 7,
    },
    style: {
      strokeColor: '#6d6d6d',
    },
    targetID: 'node-9c05060d-8ff5-457e-bb69-b9f81039def5',
    id: 'connector_11',
  },
  {
    sourceID: 'node-272b5692-982d-4d34-a0ce-a7e46ee09b92',
    type: 'Orthogonal',
    cornerRadius: 5,
    targetDecorator: {
      shape: 'Arrow',
      height: 7,
      width: 7,
    },
    style: {
      strokeColor: '#6d6d6d',
    },
    targetID: 'node-03319bb8-4ad1-4bc9-b71f-585f784cf721',
    id: 'connector_12',
  },
  {
    sourceID: 'node-97717e2b-0360-4d6b-899a-5125e266fe97',
    type: 'Orthogonal',
    cornerRadius: 5,
    targetDecorator: {
      shape: 'Arrow',
      height: 7,
      width: 7,
    },
    style: {
      strokeColor: '#6d6d6d',
    },
    targetID: 'node-51fae793-1f2b-49ee-9cac-2cb2cebf695a',
    id: 'connector_13',
  },
  {
    sourceID: 'node-97717e2b-0360-4d6b-899a-5125e266fe97',
    type: 'Orthogonal',
    cornerRadius: 5,
    targetDecorator: {
      shape: 'Arrow',
      height: 7,
      width: 7,
    },
    style: {
      strokeColor: '#6d6d6d',
    },
    targetID: 'node-e7b98adf-dcbc-4576-a96d-acf4ca523964',
    id: 'connector_14',
  },
];
function ComplexHierarchicalModel() {
  const diagramInstance = React.useRef(null);
  function rendereComplete() {
    if (diagramInstance.current) {
      diagramInstance.current.fitToPage();
    }
  }
  return (
    <div className="control-pane diagram-control-pane">
      <div className="col-lg-8 control-section">
        <div className="content-wrapper" style={{ width: '100%' }}>
          <DiagramComponent
            id="diagram"
            ref={(diagram) => (diagramInstance.current = diagram)}
            width={'100%'}
            height={580}
            layout={{
              type: 'ComplexHierarchicalTree',
              connectionPointOrigin: ConnectionPointOrigin.DifferentPoint,
              horizontalSpacing: 40,
              verticalSpacing: 40,
              orientation: 'TopToBottom',
              margin: { left: 10, right: 0, top: 0, bottom: 0 },
            }}
            // snapSettings={{ constraints: 0 }}
            nodeTemplate={diagramTemplate}
            nodes={nodes}
            connectors={connectors}
            created={rendereComplete}
            snapSettings={{ constraints: SnapConstraints.None }}
              constraints={DiagramConstraints.Default | DiagramConstraints.LineRouting | DiagramConstraints.Bridging }
          >
            <Inject
              services={[
                DataBinding,
                ComplexHierarchicalTree,
                LineDistribution,
                LineRouting,
                ConnectorBridging
              ]}
            />
          </DiagramComponent>
        </div>
      </div>
    </div>
  );
}
export default ComplexHierarchicalModel;




5 Replies
MJ Meriton Jamesdurai Syncfusion Team March 21, 2025 01:51 PM UTC

Hi Lia,

 

Thank you for bringing this to our attention. We have successfully replicated the issue you’re facing, where the connector lines are overlapping the nodes in your diagram.

After investigating, we found that this can be resolved by enabling the enableRouting property within the layout settings. This ensures that the connectors automatically avoid nodes and route properly around them.

Once you set enableRouting to true, the connectors will be routed correctly, and the overlapping issue will be resolved.

For your reference, please check the updated sample and UG documentation.
Sample - 36knoyes (forked) - StackBlitz

UG doc - https://ej2.syncfusion.com/react/documentation/diagram/complex-layout#enable-routing-for-layout

Please let us know if you need any further assistance!

 

Best regards,

Meriton

 


LT Lia Tran replied to Meriton Jamesdurai March 25, 2025 08:01 AM UTC

Hi Meriton,

Your suggestion solved my problem.

Thank you for your help! Wishing you a great workday!


PR Preethi Rajakandham Syncfusion Team March 26, 2025 06:58 AM UTC

Hi Lia Tran,

You are welcome. 

We are glad that the provided response meets your requirement. Please let us know if you need further assistance. As always, we are happy to help you out. 

Regards,

Preethi R


LT Lia Tran April 1, 2025 09:13 AM UTC

Hi team,

Continue working with the sample you sent, I found that if there is no connectors, nodes will overlap each other (please refer to attached screenshot).

How can I fix it?

Thank you!


Image_2833_1743498721715


MJ Meriton Jamesdurai Syncfusion Team April 2, 2025 12:02 PM UTC

Hi Lia Tran,


Thank you for reporting the issue.

We were able to replicate the problem on our end where nodes overlap when there are no connectors. Our team is currently validating the issue, and we will get back to you as soon as possible.

We appreciate your patience. Please let us know if you have any further queries.


Best regards,
Meriton



Loader.
Up arrow icon