how to eliminate the overlapping of file nodes on the tree? tried to pull aways, but bounce back to overlap

[SueCheng]

Good work!, yet there are some overlapping of file nodes on the tree? tried to pull aways, but bounce back to overlap

[nicoespeon]

Hi @SueCheng 👋

Good question, I see what you mean. I've got a couple of suggestions to do so:

• Maybe using the simple renderer would work for you. Have you tried running the command with the -s option? Is it producing something usable to you?
• If not, another option would be to reduce the amount of nodes on screen. I think less nodes would reduce the overlapping effect. Again, I'm not sure that's something that would suits your needs, but it's an option.
• If nothing works, then you could fork and adapt the code. The overlapping is coming from vis renderer physics feature, which is enabled by default. You could try different configuration here: https://github.com/nicoespeon/sass-graph-viz/blob/9033e17f0b99d06b368fff781014b9e0355bc51b/src/rendering/vis/views/index.pug#L60-L67. For example, to disable the physics altogether, you'd need to add physics: { enabled: false } to the options object

Let me know if you manage to get a more helpful result for you.

[nicoespeon]

Closing the issue. Feel free to re-open it if you need further details.

[kerryj89]

Thanks @nicoespeon for this!

My company's project has hundreds of imports as it's shared across projects and also uses Bootstrap.

The default setup does not play well when wanting to keep import references across projects and libraries.

If you follow @nicoespeon advice above and replace it with the below options I've set, you can get something a little more tidier and readable. It goes from left to right which works better for long import paths.

var options = {
  autoResize: true,
  height: '100%',
  width: '100%',
  edges: {
    arrows: 'to',
    smooth: {
      type: "cubicBezier",
      roundness: 1
    }
  },
  nodes: {
    font: {
      align: 'left'
    },
    shape: 'box'
  },
  layout: {
    hierarchical: {
      levelSeparation: 800, 
      treeSpacing: 300, 
      blockShifting: true, 
      edgeMinimization: true, 
      parentCentralization: true, 
      direction: 'LR', 
      nodeSpacing: 15, 
      sortMethod: "directed" 
    }
  }
};

[nicoespeon]

That's amazing, thank you @kerryj89 for sharing ❤️