有现成 js 库可以画这样类似树形图的图吗？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

V2EX 提问指南

这是一个创建于 2022 天前的主题，其中的信息可能已经有所发展或是发生改变。

就是有层级和元素间父子关系还有孤立的元素。
目前想到的只有一个个画，但是那样算位置比较麻烦，根据每层元素平均分有的时候会不好看。

树形图

元素

img

现成

17 条回复 • 2019-05-05 14:44:45 +08:00

MiRECoFu

2019-05-05 09:37:03 +08:00 via Android

图片没加载出来。。但是根据描述你可以去看看 antv 或者 g2.js

whypool

2019-05-05 09:39:11 +08:00

topo.js

awebird

2019-05-05 09:41:00 +08:00

https://github.com/antvis/g6

zarte

2019-05-05 10:10:01 +08:00

好的，我去看看

zarte

2019-05-05 10:19:35 +08:00

@awebird 这个之前看了，需要自己定位的，画图 echart 也是可以，不过也是要自己定位，有添加节点和关系数据自动定位分布的吗？

liuzhaowei55

2019-05-05 10:38:23 +08:00

neo4j

runze

2019-05-05 10:42:13 +08:00

你需要的可能是 Graphviz 的 JavaScript 实现？

chezs66

2019-05-05 10:49:59 +08:00

vis.js network 有 hierarchical layout
http://visjs.org/docs/network/

zarte

2019-05-05 10:57:26 +08:00

@runze 我自己也不懂叫什么图=.=lll, 跟层级图树形图关系图都有点关系。

runze

2019-05-05 10:58:32 +08:00

@zarte #9 那么 Graphviz 应该适合你

chezs66

2019-05-05 11:10:11 +08:00

@runze 请问你有没有 API 结果 <-> DOT 语言相互转换的最佳实践？我之前选择技术方案时就纠结在这一点

Mountain

2019-05-05 11:26:12 +08:00

https://gojs.net

runze

2019-05-05 11:52:23 +08:00

@chezs66 #11 抱歉，我也没找到，目前都是根据业务需求分别写

grewer

2019-05-05 14:11:00 +08:00

https://antv.alipay.com/zh-cn/g6/3.x/demo/index.html#_%E6%B5%81%E5%9B%BE
这个看看

grewer

2019-05-05 14:11:32 +08:00

没看到上面已经推了..

grewer

2019-05-05 14:12:51 +08:00

这种库比较少,毕竟图像化的业务相关比较少要是有自己的特殊需求还是自己写好了

zarte

2019-05-05 14:44:45 +08:00

@grewer 嗯，打算用 G6 试试看，大部分满足的，位置可能需要自己算下。
然后发现我要画的图节点外层还要有个框包裹同层多个节点。。。