如何动态生成下面的图

[img]http://dl.iteye.com/upload/attachment/245534/0f0bf029-cd0b-373e-bfa6-c95cd0241555.jpg[/img]
如上图,每条不同的竖线代表一个交换机,箭头代表交换机之间发送消息的方向。每次会收到一对交换的信息,比如说(A,B)表示从A发到B,(B,A)表示从B发到A,如此类推,请问如何在页面中实现这样的效果
接受消息是这样的:
function MsgReceive(msg)
{
//在这里根据msg处理
}

依靠定位来实现,根据msg取到对应箭头所需要的div然后在那个div中添加一个箭头的子元素,为了浏览器兼容我用Ext-core实现可一个你可以看看
http://chemzqm.iteye.com/blog/661513

这样你看行不行,先不管你通过表格还是div的形式把四个竖线显示出来,必须的。
然后每两个竖线之间都有四条箭头线,一往一返,你可以把每两个竖线之间的四条线线都定义好,并且为置方向都ok,然后得操作时使所有的这些横线箭头都style.display = "none" ,隐藏它们。
再js函数中,四条竖线有相应的代表 A/B/C/D,每条横线你也可以定义好他们的id属性,比如A1,A2,A3,A4。。。,然后如果你获取的信息时A->B,那么你就让A1这条线显示出来,即style.display="block";

只是建议

根据你讲的那应该是绘图了,随着数据的改变,对图像进行重绘,如果这样的话用程序来实现是否更方便一点。大概设置一下每个竖线上多少个点,这都以用坐标来表示,然后逐个用线连接,先不管箭头啦,如果是超过了这么多条,判断下在从最上面的那条开始重画

很好很强大