CCS+JS绘制星型拓扑图（关系图）

1. 需求

业务上，有时候需要展示与某一特定目标关联的其它相关元素，可能会用关系图来表示（专业名称为星型网络拓扑图），如下：

一般来说，像d3.js或 Echarts 这些库都会有相应的实现，可以直接引用它们的API来实现。

但是，如果工程中只有这一处使用这种图表，不想因为这一个需求就引入一整个库，或者不想承受这些库所带来的性能开销（canvas绘图非常耗性能）,那可以考虑本文将要介绍的这种使用纯CSS+原生JS 的方案尝试一下。

2. 需求分析

对于整个需求，我们可以分为两部分：

中间的目标元素
- 它由内外两层圈组成
- 外圈带有渐变，内层是虚线边框
- 外圈逆时针旋转，外层逆时针旋转
周围的关联元素
- 与目标元素之间有连线
- 均匀分布在目标元素周围

下面就分步骤来分别实现这两个需求

3. 目标元素

环形渐变

一开始，能想到的方案是外层一个正方形，然后设置一定宽度的边框，边框border-image 属性设置为一个渐变色，但是经过尝试，边框的渐变色无法达到预期的均匀分布的效果，故放弃，采取外圆-内圆=环形 的方案。

首先我们有一个外层盒子
然后里面有一个内层盒子，内层盒子比外层盒子稍小
然后外层盒子设置一个背景色并利用圆角边框属性裁剪为圆形，
内层盒子设置背景色为白色并利用圆角边框属性裁剪为圆形
通过定位将内层盒子放在合适的位置，形成一个环，代码与效果如下：

<div class="outer-box"><div class="inner-box"></div>
</div><style>.outer-box {width: 200px;height:200px;position: relative;border-radius: 50% 50%;background: blue;}.inner-box {width: 180px;height: 180px;position: absolute;left:10px;top:10px;background-color: #fff;border-radius: 50% 50%;}</style>

效果如下：

外部圆环就出来了。

这里的关键点是

但是这个圆环要是一个均匀分布的渐变色，即使设置外层盒子background-image属性为一个渐变色，也达不到需求所要的效果，怎么办呢？

仔细观察需求，其实是一组渐变色在圆环上顺着时针方向重复了四次。那假设组成这组渐变的四个颜色点分别是#1，#2，#3，#4，它们在圆环上其实是像下面这样排列的：

既然这样，我们完全可以把它们分成四份，每一份的背景色都是由 #1、#2、#3、#4组成的渐变，只不过渐变的方向不同而已。那我们就在外层盒子中再放入四个小盒子，每个盒子大小占外层盒子的四分之一，然后设置同样的渐变色不同的渐变方向：

<div class="outer-box"><div class="left-top"></div><div class="right-top"></div><div class="left-bottom"></div><div class="right-bottom"></div><div class="inner-box"></div>
</div><style>.left-top, .right-top, .left-bottom, .right-bottom {width: 100px;height: 100px;position: absolute;}.left-top {background: linear-gradient(to top right, #C3DDFF 25%, #F1f7ff 100%, #78B3FF 75%, #98C5FF 100%);top:0;left:0;}.right-top {background: linear-gradient(to bottom right, #C3DDFF 25%, #F1f7ff 100%, #78B3FF 75%, #98C5FF 100%);top:0;left:100px;}.left-bottom {background: linear-gradient(to left top, #C3DDFF 25%, #F1f7ff 100%, #78B3FF 75%, #98C5FF 100%);left:0;top:100px;}.right-bottom {background: linear-gradient(to left bottom, #C3DDFF 25%, #F1f7ff 100%, #78B3FF 75%, #98C5FF 100%);left: 100px;top: 100px;}
</style>

可以看到效果如下：

可是，由于border-radius 只作用于边框，边框变性后并不影响内容的展示，所以我们发现四个小盒子其实没有形成圆环，我们有两种方案解决这个问题：

方案一：利用overflow属性

.outer-box {width: 200px;height:200px;position: relative;border-radius: 50% 50%background: blue;ovarflow: hidden;
}

方案二：利用clip-path，可以不再使用圆角边框

.outer-box {width: 200px;height:200px;position: relative;clip-path: circle(50% at 50% 50%); background: blue;}

完成后效果如下：

可以看到，外层圆环基本成型。再给它加上小圆点，就完全符合需求了：

<div class="outer-box"><div class="left-top"><div class="litle-circle"></div></div><div class="right-top"><div class="litle-circle"></div></div><div class="left-bottom"><div class="litle-circle"></div></div><div class="right-bottom"><div class="litle-circle"></div></div><div class="inner-box"></div>
</div><style>.litle-circle {width:10px;height: 10px;background-color: #4094FF;clip-path: circle(50% at 50% 50%);}.left-top .litle-circle {margin-top:90px;margin-left: 0;}.right-top .litle-circle {margin-top: 0;margin-left: 0;}.left-bottom .litle-circle {margin-top:90px;margin-left: 90px;}.right-bottom .litle-circle {margin-left: 90px;margin-top: 0;}
</style>

最终环形渐变如下：

然后让它动起来，就是添加一个动画效果：

.outer-box {width: 200px;height:200px;position: relative;clip-path: circle(50% at 50% 50%);background: blue;animation: spin 6s linear infinite;
}@keyframes spin{to {transform: rotate(-1turn);}
}

其中，-1turn 表示逆时针旋转一周。

效果如下

内部圈

然后添加内部转动的圈，这个内部圈可以加到内部盒子里：

<div class="inner-box"><div class="inner-rotate-box"></div>
</div><style>.inner-rotate-box {width: 150px;height: 150px;left:15px;top: 15px;position:absolute;border:4px dashed blue;border-radius: 50% 50%;box-sizing: border-box;}
</style>

主要是利用border:4px dashed blue 给它设置一个虚线边框

效果：

我们发现内层是跟着外层转动的，而需求时内层要与外层相反，顺时针旋转，我们通过设置动画参数来让它反向旋转：

.inner-rotate-box {animation: spin 12s linear infinite;animation-direction: reverse;
}

我们发现，其实没有效果，那是因为它的外层盒子inner-box 还是跟着outer-box一起旋转的，我们给它的外层盒子也加上反向旋转：

.inner-box {animation: inherit;animation-direction: reverse;
}

通过继承outer-box的动画并进行反向运动，可以抵消outer-box带给inner-box的旋转动画，这时看起来inner-box就像是没有在旋转一样，而它内部的旋转盒子又是与外层盒子反向旋转的，就能实现内外相反运动的效果：

接着，我们再给内层旋转的圆添加一层点状虚线圈：


<div class="inner-box"><div class="inner-rotate-box"></div><div class="inner-dotted-box"></div>
</div><style>.inner-dotted-box {width: 154px;height:154px;position:absolute;top:13px;left:13px;border: 2px dotted #B5D5FF;border-radius: 50% 50%;box-sizing: border-box;}
</style>

这里关键点有两个：

这里的虚线是点状虚线，所有边框样式用dotted;
这里和上面的inner-rotate-box 都要设置box-sizing 为border-box，以便使我们的位置计算更为精确；

效果如下：

最后，我们把内容添加上，注意，内容盒子要和旋转盒子和点状虚线盒子同级，直接放在内层盒子里，原因是我们上面说过的，内层盒子inner-box通过与外层盒子反向旋转抵消了旋转，而看起来就像是没有旋转一样，内容只有放在它里面，才不会跟着旋转。

<div class="inner-box"><div class="inner-rotate-box"></div><div class="inner-dotted-box"></div><div class="inner-content">目标内容</div>
</div><style>.inner-content {width: 120px;height: 120px;position: absolute;top: 30px;left: 30px;display: flex;justify-content: center;align-items: center;}</style>

效果如下：

下面是整个目标元素的实现代码，可供参考：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>双层圆环反向圆周运动示例</title><style>.outer-box {width: 200px;height:200px;position: relative;clip-path: circle(50% at 50% 50%);border-radius: 50% 50%;background: blue;animation: spin 6s linear infinite;}.inner-box {width: 180px;height: 180px;position: absolute;left:10px;top:10px;background-color: #fff;border-radius: 50% 50%;animation: inherit;animation-direction: reverse;}.left-top, .right-top, .left-bottom, .right-bottom {width: 100px;height: 100px;position: absolute;}.left-top {background: linear-gradient(to top right, #C3DDFF 25%, #F1f7ff 100%, #78B3FF 75%, #98C5FF 100%);top:0;left:0;}.right-top {background: linear-gradient(to bottom right, #C3DDFF 25%, #F1f7ff 100%, #78B3FF 75%, #98C5FF 100%);top:0;left:100px;}.left-bottom {background: linear-gradient(to left top, #C3DDFF 25%, #F1f7ff 100%, #78B3FF 75%, #98C5FF 100%);left:0;top:100px;}.right-bottom {background: linear-gradient(to left bottom, #C3DDFF 25%, #F1f7ff 100%, #78B3FF 75%, #98C5FF 100%);left: 100px;top: 100px;}.litle-circle {width:10px;height: 10px;background-color: #4094FF;clip-path: circle(50% at 50% 50%);}.left-top .litle-circle {margin-top:90px;margin-left: 0;}.right-top .litle-circle {margin-top: 0;margin-left: 0;}.left-bottom .litle-circle {margin-top:90px;margin-left: 90px;}.right-bottom .litle-circle {margin-left: 90px;margin-top: 0;}.inner-rotate-box {width: 150px;height: 150px;left:15px;top: 15px;position: absolute;border:4px dashed blue;border-radius: 50% 50%;box-sizing: border-box;animation: spin 12s linear infinite;animation-direction: reverse;}.inner-dotted-box {width: 154px;height:154px;position:absolute;top:13px;left:13px;border: 2px dotted #B5D5FF;border-radius: 50% 50%;box-sizing: border-box;}.inner-content {width: 120px;height: 120px;position: absolute;top: 30px;left: 30px;display: flex;justify-content: center;align-items: center;}@keyframes spin{to {transform: rotate(-1turn);}}</style>
</head>
<body><div class="outer-box"><div class="left-top"><div class="litle-circle"></div></div><div class="right-top"><div class="litle-circle"></div></div><div class="left-bottom"><div class="litle-circle"></div></div><div class="right-bottom"><div class="litle-circle"></div></div><div class="inner-box"><div class="inner-rotate-box"></div><div class="inner-dotted-box"></div><div class="inner-content">目标内容</div>        </div></div>
</body>
</html>

4. 关联元素

对于关联元素，则相对复杂一点，我们要考虑的是：

关联元素个数不定，可能很少，也可能很多，所以少的时候就要大一点，多的时候就要小一点，这就需要计算关联元素的宽度，又由于都是圆形展示，所以都是一个正方形盒子裁切成圆形
关联元素要围绕目标元素均匀分布
关联元素与目标元素之间要有连线

基于以上几个点，我们设计了如下算法：

4.1 容器区块划分

我们把整个外层容器设计成一个正方形，然后使用水平平分线、垂直平分线和两条对角线将它划分为8个区块，加上这几条线本身切割形成的8条线也算一个区块，总共16个区块：

4.2 根据数量计算关联元素尺寸、弧度及角度

根据关联元素的数量，计算关联元素的尺寸、弧度和角度

即如果有N个关联元素，并且N> 2, 则我们认为可以将N个元素分别绘制到容器上半部分和下半部分，即将所有元素平分到两个数组里，如果是奇数个，则上半部分的数组里就多一个。

const rowLength = Math.ceil(this.unitRelations.length / 2); // 向上取整
const row1 = [];
const row2 = [];
for (let j = 0; j < this.unitRelations.length; j++) {j < rowLength ? row1.push(j) : row2.push(j);
}

然后计算它的尺寸，就是看元素所在那半部分一共有几个元素，然后设置一定的间隔距离，用整个容器的宽度减去它们之间的间隔的总和，再除以这半部分的元素个数，就获得了它的尺寸，当然，我们这里还需要设置一个最大尺寸，防止它的尺寸太大，在视觉上显得比目标元素还要重要。

const maxSize = 100;
const originalSize = this.graphWidth / rowLength;
const gap = originalSize / 10; // 间隔设置为元素无间隔平分区域时的大小的十分之一
const size = (this.graphWidth - gap * (rowLength - 1)) / rowLength;
const result = size > maxSize ? maxSize : size;

然后计算出每个元素平均的弧度和角度：

const baseRadian = parseInt(360 / this.unitRelations.length); // 每一份的基本弧度
const radian = 30 + baseRadian * i; // 获得旋转弧度，我们将起始点设置为30度
const minRadian = this.isInRow([1, 3, 5, 7], this.getBlockIndex(radian)) ? radian % 45 : 45 - radian % 45;
const angle = minRadian * Math.PI / 180; // 获得弧度相应的角度

这里，minRadian 其实是用来计算当前元素参与位置计算时它的实际弧度，由于我们要用直角三角形的三角函数来计算它的位置，所以它的基础弧度要小于45度，而它处在不同区块时，用来计算的弧度也是不一样的：

如果它处于1/3/5/7区块，则参与计算的弧度就是它取模后的弧度
如果它处于2/4/6/8区块，则参与计算的弧度是它的弧度取模后与45的插值

如图：

分别落在第3和第4区块内的两个元素，第3区块参与计算的弧度就是它弧度取模后的德尔塔1，而第4区块的元素参与计算的弧度实际上是取模后的弧度德尔塔2与区块弧度45之间的差值德尔塔3。

有了元素尺寸和参与计算的角度，我们又有容器的宽高，根据上图，我们很容易就可计算出元素距容器左边和上边的距离，这样元素的位置就确定了。

具体计算过程需要用到三角函数，可以自行计算。

边框吸附

注意上图，我们之所以能够对元素位置进行计算，还用到了一个技巧，就是边框吸附，我们默认关联元素时吸附在外层容器边框上的，当然，根据其所处区块不同，其吸附的边有可能是上、下、左、右其中一边，

代码如下：

const { radian, opposite } = this.getBaseProperty(i);const block = this.getBlockIndex(radian);if (block === 1) {return {top: this.graphWidth / 2 - opposite - width / 2,left: 0};} else if (block === 2) {return {top: 0,left: this.graphWidth / 2 - opposite - width / 2};} else if (block === 3) {return {top: 0,left: this.graphWidth / 2 + opposite - width / 2};} else if (block === 4) {return {left: this.graphWidth - width,top: this.graphWidth / 2 - opposite - width / 2};} else if (block === 5) {return {left: this.graphWidth - width,top: this.graphWidth / 2 + opposite - width / 2};} else if (block === 6) {return {left: this.graphWidth / 2 + opposite - width / 2,top: this.graphWidth - width};} else if (block === 7) {return {left: this.graphWidth / 2 - opposite - width / 2,top: this.graphWidth - width};} else if (block === 8) {return {left: 0,top: this.graphWidth / 2 + opposite - width / 2};} else if (block === 1.5) {return {left: 0,top: 0};} else if (block === 2.5) {return {left: this.graphWidth / 2 - width / 2,top: 0};} else if (block === 3.5) {return {left: this.graphWidth - width / 2,top: 0};} else if (block === 4.5) {return {left: this.graphWidth - width,top: this.graphWidth / 2 - width / 2};} else if (block === 5.5) {return {left: this.graphWidth - width / 2,top: this.graphWidth - width};} else if (block === 6.5) {return {left: this.graphWidth / 2 - width / 2,top: this.graphWidth - width};} else if (block === 7.5) {return {left: 0,top: this.graphWidth - width};} else if (block === 8.5) {return {left: 0,top: this.graphWidth / 2 - width / 2};}

可以看到，不同的区块，其吸附的边不一样，具体表现就是直接设置其left为0或top为0，或者left为容器宽度减去元素尺寸或者容器高度（其实也就是容器宽度）减去元素尺寸等等；

连线

对于连线，我们设计为关联元素内部的一个绝对定位的元素：

 <li v-for="(site, index) in unitRelations" :key="index" :style="getStyle(index)"><div class="connector" :style="getConnectStyle(index)"><span class="one" :style="getDirect(index)"></span><span class="two" :style="getDirect(index)"></span><p>{{ site.unitType }}</p></div><div class="site-info"><p>{{ site.mediaName }} <br /> {{ site.siteName }}</p></div></li>

上面是Vue项目中应用的代码片段，其中类名为connect的元素就是连线。类名为one和two的两个元素就是需求中连线上不断运动的小点，这个很好实现，就不讲了，主要讲下连线的长度和角度计算。

连线默认其实就是关联元素中一个绝对定位的长方形，它的固定高度可以设为2-5像素（根据需要）来模拟一根线，然后初始高度就是元素的高度的一半位置，而水平偏移量则根据其所在不同区块而不同：如图

然后我们计算它的宽度，由于我们已经确定了关联元素的位置和角度，就可以直接根据元素位置的left值和top值，结合容器的宽高，利用三角函数，计算出元素圆心到目标元素圆心的连线距离，如图所示：

计算出连线长度后，上文所说的连线初始水平偏移量也就是它的长度（或负的长度，根据偏移方向不同），

然后将它旋转和关联元素一样的弧度，就可以了。

当然，关联元素的大小、位置算法还很基础，有兴趣的同学可以尝试更好的算法，比如各个元素的尺寸可以增加一定弹性系数，呈现出有大有小，近大远小的视觉效果，位置也可以不用吸附，而是根据区块内元素拥挤程度，适当调节某些元素的位置，有的可以离目标近点，有的可以离目标远一点。

由于这部分算法还不算最优，就补贴具体代码了，读者可以根据以上思路和关键点自行进行开发和算法优化。