V2EX = way to explore
V2EX 是一个关于分享和探索的地方
Sign Up Now
For Existing Member  Sign In
• 请不要在回答技术问题时复制粘贴 AI 生成的内容
DongDongProMax
V2EX  ›  程序员

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

  •  
  •   DongDongProMax · Nov 27, 2023 · 1850 views
    This topic created in 891 days ago, the information mentioned may be changed or developed.
    7 replies    2023-11-28 08:49:29 +08:00
    hesetiema
        1
    hesetiema  
       Nov 27, 2023
    这有原生的,没有吧?
    Puteulanus
        2
    Puteulanus  
       Nov 27, 2023
    以前抄过网上 d3.js 绘制这种的
    DiamondYuan
        3
    DiamondYuan  
       Nov 27, 2023 via Android
    可以看看 x6 或者 g2 ,https://x6.antv.antgroup.com/
    DongDongProMax
        4
    DongDongProMax  
    OP
       Nov 27, 2023
    @DiamondYuan 谢谢回复,我参考一下
    DongDongProMax
        5
    DongDongProMax  
    OP
       Nov 27, 2023
    @Puteulanus d3.js 好像在示例里面是有一个树结构的例子,我参考一下
    Puteulanus
        6
    Puteulanus  
       Nov 27, 2023
    @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
       Nov 28, 2023
    @Puteulanus #6 谢谢你!
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   1011 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 30ms · UTC 22:36 · PVG 06:36 · LAX 15:36 · JFK 18:36
    ♥ Do have faith in what you're doing.