发表于 & 归档在 HTML5, JavaScript, 拓扑图.

总线布局是拓扑图中的一种典型结构,总线(Bus),是计算机各种功能部件之间传送信息的公共通信干线,总线和与之连接的设备一起组成一种拓扑结构,这种图称为总线型拓扑图

总线拓扑图示例

Qunee中定义了Bus类型图元,可以通过路径描述一条总线,与总线相连的节点连线,成正交线性布局

示例

var graph = new Q.Graph(canvas);
graph.zoomToOverview();

var idIndex = 0;
function createNodeLinkToBus(bus, x, y, angle){
    var node = graph.createNode("-" + idIndex, x, y);
    node.image = Q.Graphs.server;
    node.host = bus;
    idIndex++;
    var edge = createEdge(bus, node, angle);
    return node;
}

function createEdge(a, b, angle){
    var edge = graph.createEdge(a, b);
    edge.setStyle(Q.Styles.ARROW_TO, false);
    edge.angle = angle;
    return edge;
}

function createBus(path){
    var bus = new Q.Bus(null, path);
    graph.graphModel.add(bus);
    bus.setStyle(Q.Styles.SHAPE_STROKE, 5);
    bus.setStyle(Q.Styles.SHAPE_FILL_COLOR, false);
    return bus;
}

function createTerminal(name, x, y){
    var node = graph.createNode(name, x, y);
    node.image = Q.Shapes.getShape(Q.Consts.SHAPE_RECT, 30, 15);
    node.setStyle(Q.Styles.SHAPE_FILL_COLOR, "#888");
    return node;
}

var bus = createBus();
bus.moveTo(-250, -80);
bus.lineTo(-250, -120);
bus.moveTo(-250, -100);
bus.lineTo(300, -100);
bus.lineTo(300, 100);
bus.lineTo(-250, 100);
bus.moveTo(-250, 80);
bus.lineTo(-250, 120);

var t1 = createTerminal("T1", -310, -100);
var t2 = createTerminal("T2", -310, 100);
t1.host = bus;
t2.host = bus;
createEdge(t1, bus, 0);
createEdge(t2, bus, 0);

var startX = -160;
var vGap = 50;
var hGap = 30;
while(startX < 170){
    createNodeLinkToBus(bus, startX, vGap - 100, Math.PI / 2);
    startX += hGap;
    createNodeLinkToBus(bus, startX, -vGap - 100, Math.PI / 2);
    startX += hGap;
}
startX = -160;
while(startX < 170){
    createNodeLinkToBus(bus, startX, vGap + 100, Math.PI * 0.3);
    startX += hGap;
    createNodeLinkToBus(bus, startX, -vGap + 100, Math.PI * -0.3);
    startX += hGap;
}
var startY = -70;
while(startY < 80){
    createNodeLinkToBus(bus, 300 - vGap, startY, Math.PI + Math.PI / 8);
    startY += hGap;
    createNodeLinkToBus(bus, 300 + vGap, startY, Math.PI / 8);
    startY += hGap;
}

运行效果

鱼骨型总线布局

在线演示

http://demo.qunee.com/#Bus Demo

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注


九 − 8 =

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>