Создание CSS кругов, соединенных линий среднего основного круга

Question

Мне нужно создать страницу что-то вроде этого. Синий круг - это главный круг, а зеленые круги должны располагаться вокруг основного круга. Количество зеленых кругов случайное (около 0 - 10). Все зеленые круги соединены с синим кругом с линией.

Я знаю, чтобы нарисовать круг в CSS. Мне нужно знать,

1. Как поместить зеленые круги вокруг синего круга
2. Как соединить зеленые круги синего круга

Можно сделать с помощью CSS. Если не так?

спасибо.

Answer 1

Что вам нужно это position: relative; контейнер с дочерними элементами расположены absolute

Demo

Demo 2 (Использование transform)

Пояснение: Что я делаю здесь, используя position: relative; на родительский элемент, который равен .ball_wrap, чем я использую position: absolute; для дочерних элементов AS WELL AS :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; 
} 

---

Также вы можете взглянуть на these types of charts с помощью 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-индекс, поэтому он й формы:

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

jsFiddle

Answer 3

Вот примерный образец 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,
особенно если вы хотите нарисовать визуализацию данных или карту отношений.

Answer 4

Другой номер example с использованием svg элементов. Элементы SVG очень хороши для подобных случаев.

Вы получите более подробную информацию о here.

Если вы пытаетесь сделать некоторые визуализации из него. Я предлагаю вам ладить с d3. Библиотека javascript, которая использовала элементы svg для создания потрясающей визуализации.

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; 
    }