如何将缩放图中的链接更改为折叠线？

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/