V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
DongDongProMax
V2EX  ›  程序员

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

  •  
  •   DongDongProMax · 354 天前 · 1355 次点击
    这是一个创建于 354 天前的主题,其中的信息可能已经有所发展或是发生改变。
    7 条回复    2023-11-28 08:49:29 +08:00
    hesetiema
        1
    hesetiema  
       354 天前
    这有原生的,没有吧?
    Puteulanus
        2
    Puteulanus  
       354 天前
    以前抄过网上 d3.js 绘制这种的
    DiamondYuan
        3
    DiamondYuan  
       353 天前 via Android
    可以看看 x6 或者 g2 ,https://x6.antv.antgroup.com/
    DongDongProMax
        4
    DongDongProMax  
    OP
       353 天前
    @DiamondYuan 谢谢回复,我参考一下
    DongDongProMax
        5
    DongDongProMax  
    OP
       353 天前
    @Puteulanus d3.js 好像在示例里面是有一个树结构的例子,我参考一下
    Puteulanus
        6
    Puteulanus  
       353 天前
    @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
        7
    DongDongProMax  
    OP
       353 天前
    @Puteulanus #6 谢谢你!
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5628 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 03:37 · PVG 11:37 · LAX 19:37 · JFK 22:37
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.