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

Question

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

我知道在CSS中绘制圆圈。我需要知道，

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

是否可以使用CSS。如果不是这样的话？

谢谢。

Answer 1

您需要的是position: relative;容器，子元素位于absolute

Demo

Demo 2 （使用transform）

说明：这里做的是在position: relative;父元素上使用.ball_wrap，而不是使用position: absolute;作为子元素和:after伪用于将子元素与父元素连接的元素。如果你不知道伪元素而不是将它们作为虚拟元素，那么这些元素在字面上不存在于DOM中，但它们确实以图形方式呈现。我正在使用display: block;，因为它们inline默认情况下......与content: "";一样... ...休息，使用top，right，{{相应地设置它们1}}和bottom属性。

left

---

您也可以使用jQuery查看these types of charts

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 canvas：

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>

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

Answer 4

这是使用svg元素的另一个example。 SVG元素非常适合这些情况。

您将获得有关here的更多信息。

如果您正尝试从中进行一些可视化。我建议你和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;
    }