html/css 中的流程图

Question

有没有什么好方法可以在不借助脚本或表格的情况下创建流/泳线图？我说的是显示不同的主机发送数据包（X 轴上的主机，Y 轴上的时间和指向目标主机的箭头）。表格的元素似乎太多（尤其是跨越多列的箭头），但另一方面，div 很难水平放置在正确的位置（它们必须基本上与指定的“列”对齐")。

有什么好的出路吗？任何辅助框架？ （除非真的需要，否则我不想做画布的东西）

编辑：忘了补充为什么我根本没有提到图像 - 图表的某些元素应该有 :hover 动作，并且将来应该可以点击。

Answer 1

我建议使用带有透明 alpha 层（用于重叠）的 PNG 文件，并使用 CSS 绝对定位它们。我还没有看到你的整体布局，所以我不能说这是适合你特定情况的最佳方法。

类似这样的圆圈的示例 CSS 代码：<a class="circle" id="myCircle" href="foo">Foo</a>

a.circle {
  display:block;
  height:100px;
  width:100px;
  background-image:url(/path/to/circle.png);
  background-repeat:no-repeat;
  position:absolute;
  line-height:100px;
  text-align:center;
  }

单个圆形元素的代码：

a#myCircle {
  top:234px;
  left:357px;
}

类定义为共享类“圆”的所有锚元素创建一组属性。然后，ID 为“myCircle”的锚点将定位在距父元素左上角 234,357 像素的坐标处，并设置了position:relative;。