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

Question

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

我正在寻找具有这种布局的思维导图/网络/图表： 这可能与 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}
]'

你会得到这个：

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

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

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