请问大家知道这种原生 JS 的前端树插件吗？

[DongDongProMax]

[hesetiema]

这有原生的，没有吧？

[Puteulanus]

以前抄过网上 d3.js 绘制这种的

[DiamondYuan]

可以看看 x6 或者 g2 ，https://x6.antv.antgroup.com/

[DongDongProMax]

@DiamondYuan 谢谢回复，我参考一下

[DongDongProMax]

@Puteulanus d3.js 好像在示例里面是有一个树结构的例子，我参考一下

[Puteulanus]

@DongDongProMax 让 ChatGPT 帮忙写了个 https://tfbs.site/5NGF ，你可以参考一下



大概跟你那个有点接近了，样式估计再自己调一下

这是它给的代码的描述：

此代码中的椭圆形状由 ellipse SVG 元素表示，其半径属性 rx 和 ry 分别控制椭圆的宽度和高度。文本元素被配置为居中对齐，在椭圆的中心显示。您可以通过调整 rx 和 ry 的值来控制椭圆的大小，以及通过更改样式来进一步自定义外观。

要使连接线为曲线，并且是虚线，您需要在 path 元素中使用 SVG 的贝塞尔曲线命令，并为其设置 stroke-dasharray 属性以创建虚线效果。

在这个例子中，我们用 path 元素替换了 line 元素，并使用 SVG 的路径数据来创建曲线。d 属性定义了路径的形状，其中 M 表示移动到起点，A 表示绘制一个弧线（ arc ），dr 是弧线的半径，根据源点和目标点之间的距离动态计算。stroke-dasharray 属性定义了虚线的样式。

[DongDongProMax]

@Puteulanus #6 谢谢你！