创建由线连接到中间主圆的CSS圆

Question

我需要创建一个类似这样的页面。 蓝色圆圈是主圆圈，绿色圆圈应围绕主圆圈。 绿色圆圈计数是随机的（大约0-10）。 所有绿色圆圈都用一条线连接到蓝色圆圈。

我知道在CSS中画圆。 我需要知道，

1. 如何在蓝色圆圈周围放置绿色圆圈
2. 如何将绿色圆圈连接到蓝色圆圈

是否有可能与CSS。 如果不是，那怎么办？

谢谢。

Answer 1

您将需要一个position: relative; 子元素位于absolute位置的容器

演示

演示2 （使用transform ）

说明：此处使用的是position: relative; 在父元素.ball_wrap ，比使用position: absolute; 对于子元素，以及:after伪元素，用于将子元素与父元素连接。 如果您不知道伪元素而是将它们当作虚拟元素，则这些元素在DOM中并不存在，但它们确实以图形方式呈现。 所以我正在使用display: block; 因为默认情况下它们是inline的。.以及content: ""; ...休息，使用top ， right ， bottom和left属性相应地设置它们。

.ball_wrap {
    position: relative;
    margin: 150px;
    width: 90px;
}

.green_ball {
    background: #00C762;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    border: 3px solid #ccc;
    position: absolute;
}

.blue_ball {
    background: #2F9BC1;
    height: 80px;
    width: 80px;
    border-radius: 50%;
    border: 3px solid #ccc;
}

.ball_wrap div:nth-of-type(2) {
    top: 20px;
    left: -100px;
}

.ball_wrap div:nth-of-type(2):after {
    content: "";
    display: block;
    border-bottom: 1px solid #000;
    position: absolute;
    width: 50px;
    right: -50px;
    top: 50%;
}

.ball_wrap div:nth-of-type(3) {
    top: 20px;
    right: -100px;
}

.ball_wrap div:nth-of-type(3):after {
    content: "";
    display: block;
    border-bottom: 1px solid #000;
    position: absolute;
    width: 50px;
    left: -52px;
    top: 50%;
}

.ball_wrap div:nth-of-type(4) {
    right: 20px;
    bottom: -100px;
}

.ball_wrap div:nth-of-type(4):after {
    content: "";
    display: block;
    border-left: 1px solid #000;
    position: absolute;
    height: 50px;
    left: 50%;
    top: -52px;
}

---

您也可以使用jQuery来查看这些类型的图表

Answer 2

您可以使用纯CSS创建圆形：

HTML：

<div id="ball" class="border"> 
    <div class="blue ball"> </div>
</div>
<div id="ball1" class="border"> 
    <div class="green ball"> </div>
</div>

CSS：

.border
{
    position: relative;
    width: 115px;
    height: 115px;
    background: #e7e9e9;
    border-radius: 100px;
    border: 2px solid #d1d1d1;
}

.ball
{
    position: absolute;
    left: 9%;    
    top: 9%;

    width: 90px;
    height: 90px;

    border-radius: 100px;
}

.blue
{
    background: #2f9bc1;
    border: 2px solid #266a8e;
}

.green
{
   background: #00c762; 
   border: 2px solid #00be58;
}

#ball
{
    top: 200px;   
    left: 300px;
}

将每个形状放置在正确位置的position: relative; 偏移。

对于这些行，您可以使用HTML 5 canvas ：

HTML：

<canvas id="myCanvas" class="line"></canvas>

JavaScript画布：

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

context.beginPath();
context.moveTo(350, 150);
context.lineTo(50, 50);
context.stroke();

我在哪里使用position: absolute; 对于该线，因此它不会将形状推开，并且不会将z-index推到形状下方：

.line
{
    position: absolute;
    width: 320px;
    z-index: -1;
}

的jsfiddle

Answer 3

这是使用canvas的一个大致示例html。
-html-

<div style="border:solid thick #000">
    <canvas id="canvas"></canvas>
</div>

--- JavaScript ---

<script>
            var ctx;
            window.onload = function() {
                canvas = document.getElementById('canvas');
                if (!canvas || !canvas.getContext) {
                    return false;
                }
                canvas.width = 600;
                canvas.height = 600;
                ctx = canvas.getContext('2d');           
                ctx.strokeStyle = '#000';
                ctx.fillStyle = "green";
                ctx.translate(300, 300);
                drawChildCircles(5);
                ctx.arc(0, 0, 20, 0, Math.PI * 2);//center circle
                ctx.stroke();
                ctx.fill();                 
            }

            function drawChildCircles(n) {
                var ang_unit = Math.PI * 2 / n;
                ctx.save();
                for (var i = 0; i < n; i++) {
                    ctx.rotate(ang_unit);
                    ctx.beginPath();
                    ctx.moveTo(0,0);
                    ctx.lineTo(100,0);
                    ctx.arc(100, 0, 20, 0, Math.PI * 2);
                    ctx.stroke();
                    ctx.fill();
                }
                ctx.restore();
            }
        </script>

但是，我认为最好的方法是在d3.js中使用svg，
特别是如果您想绘制一些数据可视化或关系图。

Answer 4

这是另一个使用svg元素的示例 。 SVG元素对于这些情况非常有用。

您将在此处获得更多信息。

如果您要进行一些可视化处理。 我建议您与d3相处。 一个使用svg元素创建令人惊叹的可视化效果的JavaScript库。

HTML：

 <div id="container">
   <svg id="red">
        <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>
    </svg>
    <svg id="red-line">
        <line x1="130" y1="50" x2="300" y2="50" style="stroke:rgb(255,0,0);stroke-width:2"/>
    </svg>
    <svg id="blue">
        <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="blue"/>
    </svg>
    <svg id="blue-line">
        <line x1="130" y1="50" x2="260" y2="50" style="stroke:rgb(255,255,0);stroke-width:2"/>
    </svg>
    <svg id="green">
        <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="green"/>
    </svg>
    <svg id="green-line">
        <line x1="100" y1="0" x2="100" y2="70" style="stroke:rgb(255,0,255);stroke-width:2"/>
    </svg>
    <svg id="yellow">
        <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="yellow"/>
    </svg>

CSS：

#container {
      position: relative;
      margin: 150px 0 0 250px;
    }
    #container svg {
      position: absolute;
    }
    #blue {
      top: -150px;
    }
    #green {
      left: -200px;
    }
    #yellow {
      left: 200px;
    }
    #blue-line {
      margin-left: -200px;
    }
    #green-line {
      margin-top: -60px;
    }