用jointjs绘制微博关系图

来源：互联网发布：禁止吸烟网络图片大全编辑：程序博客网时间：2024/05/29 13:45

利用jointjs绘制矩形和箭头绘制微博关系图

可是我不会自动布局...如果有大神知道的话请多多指教!

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/joint.min.css" />
<style>
#paper {
   width: 760px;
   height: 670px;
   background-color: #ECE8DE;
}

</style>
</head>
<body>
   <div id="paper" align="center"></div>
   <script type="text/javascript" src="js/joint.min.js"></script>
   <script type="text/javascript">
        var paperWidth = 760; //画布宽度
        var paperHeight = 670; //画布高度
        var rectWidth = 140; //矩形宽度
        var rectHeight = 30; //矩形高度

        var textColor = '#1B4644'; // 文字颜色

        var userBgColor = '#E53537'; //当前登陆用户背景色
        var eachCareBgcolor = '#DA6959'; // 互相关注背景色
        var myCareBgColor = '#EAAB37'; //我的关注背景色
        var careMeBgColor = '#73A5B0'; //关注我的人背景色

        var userX = (paperWidth / 2) - (rectWidth / 2); //当前用户x坐标
        var userY = paperHeight / 2; //当前用户y坐标

      //创建矩形 x x轴坐标, y y轴坐标, width 宽度, height 高度, fill 填充颜色, stroke 边框颜色, text 显示文字, textColor 文字颜色
        function createRect(x, y, width, height, bgColor, text, textColor)
        {
            var rect = new joint.shapes.basic.Rect(
                {
                    position :
                        {
                            x : x,
                            y : y
                        },
                    size :
                        {
                            width : width,
                            height : height
                        },
                    attrs :
                        {
                            rect :
                                {
                                    fill : bgColor
                                },
                            text :
                                {
                                    text : text,
                                    fill : textColor,
                                    'font-weight' : 'bold',
                                    'font-variant' : 'small-caps',
                                    'text-transform' : 'capitalize'
                                }
                        }
                });

            return rect;
        }

        //创建箭头(由源指向目标) source 原, target 目标, twoWay是否是双向箭头
        function createLink(source, target, twoWay)
        {
            var link = new joint.dia.Link(
                {
                    source :
                        {
                            id : source.id
                        },
                    target :
                        {
                            id : target.id
                        },
                    attrs : {}
                });

            link.attr(
                {
                    '.connection' :
                        {
                            stroke : 'black'
                        },
                    '.marker-target' :
                        {
                            fill : 'black',
                            d : 'M 10 0 L 0 5 L 10 10 z'
                        }
                });

            if (true == twoWay)
            {
                link.attr(
                    {
                        '.marker-source' :
                            {
                                fill : 'black',
                                d : 'M 10 0 L 0 5 L 10 10 z'
                            }
                    });
            }

            return link;

        }


        jQuery(function($)
        {

            var graph = new joint.dia.Graph;

            var paper = new joint.dia.Paper(
                {
                    el : $('#paper'), //画布div id
                    width : paperWidth,//画布宽度
                    height : paperHeight,//画布高度
                    model : graph
                });

            var user = createRect(userX, userY, rectWidth, rectHeight, userBgColor, "进击的陆小龟", textColor);

            var eachCare = createRect(userX - 100, userY - 100, rectWidth, rectHeight, eachCareBgcolor, "夏木有人帐公共主页", textColor);
            var eachCare2 = createRect(userX + 100, userY - 100, rectWidth, rectHeight, eachCareBgcolor, "好肉的爷", textColor);
           var eachCare3 = createRect(userX, userY - 200, rectWidth, rectHeight, eachCareBgcolor, "诀微长老_清和真人", textColor);
            var eachCare4 = createRect(userX - 200, userY - 200, rectWidth, rectHeight, eachCareBgcolor, "进击的陆小迟", textColor);
            var eachCare5 = createRect(userX + 200, userY - 200, rectWidth, rectHeight, eachCareBgcolor, "citrus檬", textColor);

            var myCare = createRect(userX + 200, userY, rectWidth, rectHeight, myCareBgColor, "东皇薄荷", textColor);
            var myCare2 = createRect(userX + 100, userY + 100, rectWidth, rectHeight, myCareBgColor, "原创音乐基地", textColor);
            var myCare3 = createRect(userX + 300, userY + 100, rectWidth, rectHeight, myCareBgColor, "ediq", textColor);
            var myCare4 = createRect(userX + 100, userY + 200, rectWidth, rectHeight, myCareBgColor, "社会网络与数据挖掘", textColor);
            var myCare5 = createRect(userX + 300, userY + 200, rectWidth, rectHeight, myCareBgColor, "荣小松", textColor);

            var careMe = createRect(userX - 200, userY, rectWidth, rectHeight, careMeBgColor, "鬱悶的佑子", textColor);
            var careMe2 = createRect(userX - 100, userY + 100, rectWidth, rectHeight, careMeBgColor, "Anan安以菲", textColor);
            var careMe3 = createRect(userX - 300, userY + 100, rectWidth, rectHeight, careMeBgColor, "加入够倔强", textColor);
            var careMe4 = createRect(userX - 100, userY + 200, rectWidth, rectHeight, careMeBgColor, "好人放空自己在江湖", textColor);
            var careMe5 = createRect(userX - 300, userY + 200, rectWidth, rectHeight, careMeBgColor, "吾情无忆", textColor);

            var l1 = createLink(user, eachCare, true);
            var l2 = createLink(user, eachCare2, true);
            var l3 = createLink(user, eachCare3, true);
            var l4 = createLink(user, eachCare4, true);
            var l5 = createLink(user, eachCare5, true);


            var l6 = createLink(user, myCare, false);
            var l7 = createLink(user, myCare2, false);
            var l8 = createLink(user, myCare3, false);
            var l9 = createLink(user, myCare4, false);
            var l10 = createLink(user, myCare5, false);

            var l11 = createLink(careMe, user, false);
            var l12 = createLink(careMe2, user, false);
            var l13 = createLink(careMe3, user, false);
            var l14 = createLink(careMe4, user, false);
            var l15 = createLink(careMe5, user, false);


            var l16 = createLink(eachCare4, eachCare5, true);
            var l17 = createLink(eachCare5, myCare2, false);
            var l18 = createLink(eachCare5, myCare3, false);

            var l19 = createLink(myCare, myCare2, true);
            var l20 = createLink(myCare, myCare3, true);
            var l20 = createLink(myCare5, myCare4, false);

            var l21 = createLink(careMe, myCare3, false);

            graph.addCells([
               user, eachCare, eachCare2, eachCare3, eachCare4, eachCare5, myCare, myCare2, myCare3, myCare4, myCare5, careMe, careMe2, careMe3, careMe4, careMe5
            ]);

            graph.addCells([
               l1,l2,l3,l4,l5,l6,l7,l8,l9,l10,l11,l12,l13,l14,l15
            ]);

            graph.addCells([
                 l16,l17,l18,l19,l20,l21
            ]);


            // 图例部分
            var exampleX = 80;
            var userExample = createRect(exampleX, 30, rectWidth, rectHeight, userBgColor, "当前用户", textColor);
            var eachCareExample = createRect(exampleX + 150, 30, rectWidth, rectHeight, eachCareBgcolor, "互粉", textColor);
            var myCareExample = createRect(exampleX + 300, 30, rectWidth, rectHeight, myCareBgColor, "我的关注", textColor);
            var careMeExample = createRect(exampleX + 450, 30, rectWidth, rectHeight, careMeBgColor, "粉丝", textColor);

            graph.addCells([userExample, eachCareExample, myCareExample, careMeExample]);

        });
    </script>
</body>
</html>

效果图如下:

0 0