Вопрос по css, css-position, html, css3 – Создание кругов CSS, соединенных линиями с серединой основного круга

2

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

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

Как разместить зеленые кружки вокруг синего кругаКак подключить зеленые круги к синему кругу

Возможно ли это сделать с помощью CSS. Если нет, то какой путь?

Спасибо.

До сих пор я создал основной круг, и я не знаю, как создать другие круги и как разместить их вокруг основного круга. Sasindu H
Вы пробовали что-нибудь ?? Hiral
Вы, вероятно, хотите использовать canvas или SVG для этого. HTML + CSS довольно ограничен для такого рода визуализации графиков. Alex Wayne

Ваш Ответ

4   ответа
0

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

0

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

6

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

@ Сасси да, тебе нужно Mr. Alien
Спасибо, но в этом мне нужно поставить пользовательские значения в зависимости от количества зеленых кружков. Sasindu H
Но моя проблема в том, что когда я добавляю это на сайт, число зеленых кружков изменяется от 1 до 10, может быть и больше. Я не могу поставить жестко закодированные значения. Sasindu H
@Sassi, чем только CSS и HTML вам не помогут Mr. Alien
0

пример с помощьюsvg элементы. Элементы SVG очень хороши для подобных случаев.

Вы получите больше информацииВот.

Если вы пытаетесь сделать некоторые визуализации из этого. Я бы посоветовал вам ладить с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;
    }

Похожие вопросы