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

Question

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

我希望用这种布局创建思维导图/网络/图表： 这是否可以与vis.js网络一起开箱即用？ 尾端似乎是一个从左到右的分层布局，这绝对是一件事（虽然配置不同的子部分可能会更难）。

在你见过的任何例子中都没有这样做

或

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

Answer 1

我找到了一种方法，可以创建这样的东西 - 使用隐藏节点。<​​/ p>

创建一个包含节点和边缘的网络，如下所示：

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

你会得到这个：

创建“假”节点并不是很好（例如，这不是很好的可操作 - 所有这些角度都会改变，所以你最好禁止移动节点）但至少允许创建一个像你想要的静态图像。

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

PPS在这里是一个小提琴，你可以进一步调整：https://jsfiddle.net/tjyvLbns/11/我已经改变了一些选项，使它看起来更接近你需要的东西：