Connection lines overlapping requirements

[eosti]

Seems to be the case on both Chrome and Firefox. Not clear if this is a non-connecting link or not.

[dosubot]

🤖

Hi @eosti,

I'm Dosu, a friendly bot here to assist you with any bugs, questions, or contributions related to the tree-visualizer repository. While we're waiting for a human maintainer, I'm here to help out. I'm currently reviewing your issue and will provide a full answer shortly.

[dosubot]

🤖

Hello @eosti,

I'm Dosu, a friendly bot here to assist you with your concerns about the tree-visualizer repository. I can assist with troubleshooting bugs, answering queries, and guiding you on how to contribute to this project. While we wait for a human maintainer, feel free to ask me anything.

Thank you for bringing this to our attention. The overlapping of connection lines could be due to the current algorithm used for drawing connection lines, which is the Orthogonal link routing algorithm. This algorithm is typically used in tree diagrams and flowcharts where straight lines and right angles are preferred. However, in complex trees with many nodes, this can sometimes lead to overlapping lines.

The positioning of the nodes is handled by the go.TreeLayout object, which arranges the tree horizontally and grows it upwards. The distance between layers of the tree is set to 35, which might be causing the nodes to be too close together, leading to overlapping lines.

One possible solution could be to adjust the layerSpacing property of the go.TreeLayout object to increase the distance between layers of the tree. This could potentially reduce the overlapping of lines. Here's how you can do it:

this.diagram = $(go.Diagram, "app-org-chart", {
    // ...
    layout: $(go.TreeLayout, {
        // ...
        layerSpacing: 50, // Increase this value
        // ...
    }),
    // ...
})

Another solution could be to use a different link routing algorithm that better handles complex trees with many nodes. GoJS provides several other link routing options, such as go.Link.AvoidsNodes and go.Link.JumpOver.

Please try these solutions and let us know if they help resolve the issue. If not, we may need to look into this further.

Sources

• client/src/app/components/org-chart/org-chart.component.ts
• client/package.json

---

This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

If you want to continue the conversation, start your reply with @dosu-bot.