用jointjs绘制微博关系图_jointjs database-CSDN博客

本文链接：https://blog.csdn.net/swissDec/article/details/26508601

这篇博客展示了如何利用jointjs库来绘制矩形和箭头，构建微博用户的相互关系图。作者通过定义不同背景颜色的矩形表示不同的关系类型，并创建了连接矩形的双向箭头。虽然作者提到不熟悉自动布局，但手动创建的关系图清晰地呈现了用户、互相关注、我关注和关注我的人的关系。

摘要由CSDN通过智能技术生成

利用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 :