How to change links in zoomcharts to be fold-line?

Question

fold-line-pic

How to change links in zoomcharts to be fold-line?

I've attached a detailed drawing of fold-line.

Thanks for help!

Answer 1

You can achieve such layout using invisible nodes for the junctions. Also, you should be using fixed layout to control the positions of the items. Here is a simple example:

var data = {
    "nodes":[
        {"id":"n1", "loaded":true, x:100, y:0},
        {"id":"n2", "loaded":true, x:0,y:0, style: {radius: 0}},
        {"id":"n3", "loaded":true, x:0,y:100},
        {"id":"n4", "loaded":true, x:50,y:90},
        {"id":"n5", "loaded":true, x:120,y:140},
        {"id":"n6", "loaded":true, x:50,y:190},
        {"id":"n7", "loaded":true, x:0,y:180}
    ],
    "links":[
        {"id":"l1","from":"n1", "to":"n2"},
        {"id":"l2","from":"n2", "to":"n3"},
        {"id":"l3","from":"n3", "to":"n4"},
        {"id":"l4","from":"n4", "to":"n5"},
        {"id":"l5","from":"n5", "to":"n6"},
        {"id":"l6","from":"n6", "to":"n7"}
    ]
};

var t = new NetChart({
    container: document.getElementById("demo"),
    area: { height: null },
    style:{node:{radius:20}},
    layout:{mode:"static"}
});

setTimeout(function(){t.addData(data)}, 200);

http://jsfiddle.net/sL803kac/1/