Search code examples
javascriptvis.jsvis.js-network

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

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: example 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

Solution

  • 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:

    enter image description here

    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:

    enter image description here