Avoid overlapping of links and selecting node of other side

I am creating a diagram which uses two trees. For this, I have referred treemapper sample. Now, I am connecting Left tree with the right tree on the basis of some conditions (relations). This is my tree.

Here, I have two issues. Please let me know how I can achieve the desired results.

  1. As you can see, the connector lines are criss crossing each other. On the right tree, it is cutting the text which looks very bad. Is it possible that I can avoid this cutting of text? This is my code of mapping…
    myDiagram.linkTemplateMap.add(“Mapping”,
    graphObj(go.Link,
    {
    selectable: false,
    routing: go.Link.Orthogonal,
    isTreeLink: false,
    isLayoutPositioned: true,
    layerName: “Foreground” },
    { fromSpot: go.Spot.LeftRightSides },
    { relinkableFrom: false, relinkableTo: false }…

  2. When I select any node from the left tree, it highlights the node and the connector line too but it is not connecting the node of the right side. For this, I have used this function…

function showConnections(node) {
var diagram = node.diagram;
diagram.startTransaction(“highlight”);
// remove any previous highlighting
diagram.clearHighlighteds();
// for each Link coming out of the Node, set Link.isHighlighted
node.findLinksConnected().each(function(l) { l.isHighlighted = true; });
// for each Node destination for the Node, set Node.isHighlighted
node.findNodesConnected().each(function(n) { n.isHighlighted = true; });
diagram.commitTransaction(“highlight”);
}

Can any one please help me to achieve my desired result?

Thank you.

  1. You also need to set GraphObject.toSpot, not just fromSpot.

  2. Your showConnections function looks good to me. Athough depending on how you call it and if more than one node could be selected at a time, I wonder if it should iterate over all selected nodes. Maybe in a “ChangedSelection” DiagramEvent listener.

        "ChangedSelection": showConnections,

and change that function not to take any arguments and to iterate over myDiagram.selection, operating on each selected Part if it is a Node.

Also, I assume your nodes and links have Bindings to change their appearance depending on the value of Part.isHighlighted. http://gojs.net/latest/intro/highlighting.html