ズームチャートのリンクを折りたたみ線にするにはどうすればいいですか？

Question

fold-line-pic

折りたたみ線になるようにズームチャートのリンクを変更するにはどうすればよいですか？

私は折り線の詳細な図を添付しました。

ありがとうございました！

Answer 1

接合部の目に見えないノードを使用して、このようなレイアウトを実現できます。また、アイテムの位置を制御するために固定レイアウトを使用する必要があります。ここでは簡単な例です：

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/