如何创建自定义树形图样式布局（带锐角）vis.js

Question

不确定这是否应该作为一个问题出现在 github 上，所以我认为这是最好的起点。

我想用这种布局创建一个 mind-map/network/diagram： vis.js 网络可以开箱即用吗？尾端似乎是从左到右的分层布局，这绝对是一回事（尽管子部分配置不同可能更难）。

在您看到的任何示例中都没有做到这一点

或

我应该从哪里开始自己实现一些东西

Answer 1

我找到了一种创建这种东西的方法——使用隐藏节点。

像这样创建一个包含节点和边的网络：

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}
]'

你会得到这个：

创建 "fake" 节点当然不是很好（例如，这不是很好操纵的——所有这些角度都会改变，所以你最好完全禁止移动节点）但至少允许创建你想要的静态图像。

PS是的，如果你想自动生成这样的布局，你必须做一些计算。

PPS 这里有一个 fiddle 供您进一步调整：https://jsfiddle.net/tjyvLbns/11/ 我已经更改了一些选项以使其看起来更接近您的需要：

如何创建自定义树形图样式布局（带锐角）vis.js

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

javascript

vis.js

vis.js-network