How to create a custom tree chart style layout (with sharp angles) vis.js

Question

Wasn't sure if this should be on the github as an issue so I thought this was the best starting point.

I am looking to create a mind-map/network/diagram with this kind of layout: Is this possible out of the box with vis.js networks? the tail end seems to be a left to right hierarchical layout which is definitely a thing (though having sub sections configured differently might be harder).

Failing that has it been done in any examples you've seen

or

where should I get started with implementing something myself

Answer 1

I've found a way how one can create such a thing – using hidden nodes.

Create a network with nodes and edges like this:

nodes:'[
     {id:1,label:"start", x:0,  y:0}
    ,{id:2,label:"angle", x:0,  y:100, hidden:true}
    ,{id:3,label:"angle", x:100,y:100, hidden:true}
    ,{id:4,label:"finish",x:100,y:200}
]

edges:[
     {from:1, to:2}
    ,{from:2, to:3}
    ,{from:3, to:4}
]'

and you will get this:

This is of'course not very nice to create "fake" nodes (for instance, this is not nicely manipulatable – all those angles will change so you'd better forbid moving nodes at all) but at least allows to create a static image like you want.

PS yeap, you have to do some calculations if you want to generate such layouts automatically.

PPS here's a fiddle for you to tweak this further: https://jsfiddle.net/tjyvLbns/11/ I've already changed some options to make it look closer to what you need: