sách gpt4 ai đã đi

javascript - 最适合(计算机)网络图的布局

In lại 作者:搜寻专家 更新时间:2023-10-31 21:50:15 27 4
mua khóa gpt4 Nike

关闭。这个问题不符合Hướng dẫn của Stack Overflow .Câu hỏi này không liên quan đến chủ đề. Hiện tại không chấp nhận câu trả lời.












要求我们推荐或查找工具、库或最喜欢的场外资源的问题对于 Stack Overflow 来说是无关紧要的,因为它们往往会吸引固执己见的答案和垃圾邮件。相反,describe the problem以及迄今为止为解决它所做的工作。


8年前关闭。







Cải thiện câu hỏi này




我正在尝试开发基于 HTML/JS 的“(计算机)网络图”。我的意思是盒子链接到其他盒子,更重要的是,盒子包含在其他盒子的边界内。

简化用例 - 解释布局要求

用例是 VPC(巨大的盒子),里面有 AZ(2 或 3 个大盒子彼此相邻堆叠),每个里面都有子网(盒子堆叠在一起),里面有 EC2(很多小盒子相邻)。

Network Diagram

虽然我尝试了多种方法(见下文),但我还没有为我的图表找到合适的布局,我想知道我的需求是否如此独特以至于我需要自己推出。

我需要什么帮助...

  • 我想知道我的研究中是否遗漏了一些明显的东西(就 HTML5/JS 解决方案的选项而言)
  • 我是否采取了正确的方法来寻找框架,或者这些要求是否过于特殊?
  • 我是否应该考虑编写自己的布局(或者有人有一个好的布局开始的好主意)
  • 是否有一个可以很好地进行视觉分组的框架(例如,绘制一个包含较小框的大框,可能有几层深)

  • 我的研究:
  • Webcola(可与 d3 一起使用)http://marvl.infotech.monash.edu/webcola/
  • D3 http://d3js.org/
  • 联合JS http://www.jointjs.com/demos/devs

  • 可乐

    我最初尝试了 Webcola,因为以下示例似乎最有希望:
    http://marvl.infotech.monash.edu/webcola/examples/smallgroups.html

    我发现缺少文档,一些链接已经失效,并且当尝试将“布局与分层分组”与“对齐约束与准则”结合起来时,页面无法加载。

    D3.js

    这似乎有很多文档,尽管我找不到一个接近我想要构建的示例。

    https://github.com/mbostock/d3/wiki/Pack-Layout

    Pack Layout 似乎是最接近的,使用嵌套来表示层次结构。
    这种方法的问题是每个节点的大小不统一(我可以将它们全部设置为 1)并且示例使用了圆圈(我认为这似乎是这种布局的硬性规则)。

    联合JS

    http://www.jointjs.com/demos/devs

    这似乎有一个很好的例子,它似乎是一个组和输入/输出(尽管节点可以逃脱其父级的边界,这并不理想。

    1 Câu trả lời

    如果我确实很好地理解了您的问题,则只能使用 HTML/CSS 来完成:

  • VPC div(容器)位于相对位置并左浮动
  • nếu như
  • 你想创建另一行

  • 注意div的宽度

    关于javascript - 最适合(计算机)网络图的布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21153319/

    27 4 0
    Giấy chứng nhận ICP Bắc Kinh số 000000
    Hợp tác quảng cáo: 1813099741@qq.com 6ren.com