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 谢谢你!
|