gpt4 book ai didi

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

转载 作者:搜寻专家 更新时间:2023-10-31 21:50:15 27 4
gpt4 key购买 nike

关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。












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


8年前关闭。







Improve this question




我正在尝试开发基于 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

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

    最佳答案

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

  • VPC div(容器)位于相对位置并左浮动
  • 如果
  • 你想创建另一行

  • 注意div的宽度

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

    27 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com