这是一个创建于 390 天前的主题，其中的信息可能已经有所发展或是发生改变。
 |
1
hesetiema 2023-11-27 11:28:49 +08:00
这有原生的，没有吧？
|
 |
2
Puteulanus 2023-11-27 11:36:28 +08:00
以前抄过网上 d3.js 绘制这种的
|
 |
3
DiamondYuan 2023-11-27 12:36:04 +08:00 via Android
可以看看 x6 或者 g2 ，https://x6.antv.antgroup.com/
|
 |
4
DongDongProMax OP @DiamondYuan 谢谢回复，我参考一下
|
|
5
DongDongProMax OP @Puteulanus d3.js 好像在示例里面是有一个树结构的例子，我参考一下
|
|
6
Puteulanus 2023-11-27 18:02:16 +08:00
@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 属性定义了虚线的样式。 |
|
7
DongDongProMax OP @Puteulanus #6 谢谢你！
|
Select Language