Tree Layout Link Overlapping Issue

GoJS
1

Hello,

I am using GoJS organization chart to draw tree layout. As shown in below screenshot node links are overlapping but it’s generating thick to thin effect from middle of parent node to the exterme left/right child node. Is there any way that the effect is removed and instead show single line without changing the connecting line color/shade. I want to display it as a single thin line wihtout any effect with black color.

This is my code for links template as a connection between nodes.

this.myDiagram.linkTemplate =

  this.$(go.Link, go.Link.Orthogonal,

    {

      selectable: false,

      toShortLength: 2,

      layerName: "Background",

      curviness: 0,

      corner: 0

    },

    this.$(go.Shape,

      // when highlighted, draw as a thick blue line

      new go.Binding("stroke", "isHighlighted", function (h) { return h ? tempThis.gojs_highlight_color : "#727272"; })

        .ofObject(),

      new go.Binding("strokeWidth", "isHighlighted", function (h) { return h ? tempThis.gojs_highlight_line_Width : 1.0; })

        .ofObject())

  );

img_20200130
img_20200130.png929×465 28.5 KB

2

That is caused by antialiased drawing. I can see if there is a way to turn that off for those link paths, and whether doing so actually gets the effect that you want. It might not be possible.

Could you please tell me which version of GoJS you are using and the resolution of your screen? In the debugger you can evaluate go.version and myDiagram.computePixelRatio() (where myDiagram refers to your Diagram instance).

3

We haven’t found a good solution. The easiest thing you could do is force the diagram to draw at a much higher resolution than normal. Perhaps something like:

$(go.Diagram, . . .,
  { . . .,
    computePixelRatio: function() { return 3.0; }  // or 6.0
  })

This will be distinctly slower for all drawing operations.

But even this will have rendering problems (anti-aliasing artifacts) depending on exactly where the lines are drawn relative to the pixels, which changes as the user scrolls and zooms.

4

Try adding this to the CSS, too, to see if it does anything.

canvas {  
  image-rendering: -moz-crisp-edges;
  image-rendering: -webkit-crisp-edges;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}