은하계 구조와 같은 CSS를 사용

Question

나는 JSPlumb를 사용하여 노드 커넥터 응용 프로그램을 구축하고 싶습니다.

이제 아이디어는 특정 반경

에서 중앙 DIV의의 둘레를 따라 분산 모든

DIV 요소에 연결할 수있는 중앙 사업부 요소가 될 것입니다

동일하게 캡쳐 화면을 첨부하면 CSS로 가능합니다.

죄송합니다. 내 질문에 혼란 사람하지만 난에 의해 결정 효율적 I could.I은 그것을 더 잘 이해 관점

감사합니다이 편집을 몇 가지 중 하나를 감사 높은 것으로 설명

Answer 1

기호가있는 DIV를하는 것이 작업을 수행하는 가장 간단한 방법 점선의 배경 이미지입니다.

그런 다음 더 많은 DIV, 태그 또는이 위에 절대적으로 위치하는 것이 무엇이든.

<div id="my-background-div"> 
    <a href="#">Node #1</a> 
    <a href="#">Node #2</a> 
    <a href="#">Node #3</a> 
    <a href="#">Node #4</a> 
</div> 

... 등등.

프로그래밍 방식의 솔루션은 아니지만 정적 인 페이지의 경우 위의 해결 방법을 사용하면 문제가 해결되지 않을 것이라고 생각합니다.

Answer 2

이것으로 주위를 망칠 수 있습니다.

http://jsfiddle.net/A7pY2/2/

HTML :

<div id="container"> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
</div> 

CSS :

#container { 
    position: absolute; 
    top: 300px; 
    left: 300px; 
} 
#container div { 
    position: absolute; 
    background-color: #eee; 
    width: 50px; 
    height: 50px; 
} 

자바 스크립트 : 음

startCar(); 

function startCar() { 
    var items = document.getElementById("container").getElementsByTagName("div").length; 
    var angles = new Array(items); 
    var rx = 200; 
    var ry = 100; 

    initCar(); 



    function initCar() { 
     var content = document.getElementById("container"); 
     var divs = content.getElementsByTagName("div"); 
     var xpos, ypos; 
     for(var i = 0; i < items; i++) { 
      angles[i] = ((Math.PI * 2)/items) * i; 
      xpos = Math.cos(angles[i]) * rx; 
      ypos = Math.sin(angles[i]) * ry; 
      divs[i].style.left = xpos + 'px'; 
      divs[i].style.top = ypos + 'px'; 
      divs[i].style.zIndex = parseInt(ypos); 
     } 
    } 

} 

Answer 3

, 나는 JSPlumb 내용 않을거야,하지만 내가 할 수있는 말해라. 어떻게 JS의 장점을 활용할 수 있는지에 대한 몇 가지 지침을 통해 HTML/CSS 측면을 해결할 수있을 것이다. 여기에 수학이 필요하기 때문에 CSS로만 좌표를 설정하는 실용적인 비 복잡/어리석은 방법이 없을 것이라고 생각하지만, JSPlumb이 데모에서 사용하는 것으로 보이는 SVG로이 작업을 수행 할 수 있습니다. 페이지.

CSS :

#central_div { position:relative; overflow:visible; } 
/* or absolute or fixed */ 

.orbit { overflow:visible; } 
/* no position set for orbits so stars anchor to #central_div */ 

.star { position:absolute; width:20px; height:20px; } 

HTML :

<div id="central_div"> 

    <div class="orbit" data-radius="50"> 
     <div class="star" data-radians="1.23"></div> 
     <div class="star" data-radians="2.22"></div> 
     <div class="star" data-radians="4.10"></div> 
     <div class="star" data-radians="6.01"></div> 
    </div> 

    <div class="orbit" data-radius="100"> 
     <div class="star" data-radians="1.23"></div> 
     <div class="star" data-radians="2.22"></div> 
     <div class="star" data-radians="4.10"></div> 
     <div class="star" data-radians="6.01"></div> 
    </div> 

</div> 

참고 : 궤도 div의 모든 측면에서 중앙 사업부 앉아 명심하십시오. 그들은 단지 별을 구성하고 데이터 반지름 속성 형태로 쉽게 조정 된 궤도 후크를 제공합니다. 치수를 설정하거나 주위를 이동할 필요가 없습니다.

JS :

이

지금 궤도를 통해 루프, 데이터 반경을 가지고 스타 라디안 또는 학위 데이터에 그것을 적용 할 수 있습니다 JS는 (쉽게 하나 다른 변환 할 수 있습니다). 이제는 이것이 마크 업/CSS 질문과 비슷해 보이므로 setStarCoordinates이라는 함수를 가정 해 봅시다. 인수는 <star dom element object>, <radius> 및 <radians or degrees - your choice>입니다.

높이/너비 차원을 가진 별만 있지만 자체는 절대이므로 컨테이너는 모두 단일 x, y 점을 차지한다고 가정 할 수 있습니다. 이외에도 형상에서 당신은 top + (.5 * height)과 별의 상단과 왼쪽 좌표를 설정해야하고 left + (.5 * width)

라디안에 링크로 남겨 : 다음 http://www.teacherschoice.com.au/maths_library/angles/angles.htm

그리고이 같은 뭔가 루프 :

var orbits = document.querySelectorAll('#central_div .orbit'), 
i = orbits.length; 

while(i--){ 
    var radius = orbits[i].getAttribute('data-radius'), 
    stars = orbits.getElementsByClassName('star'), 
    //or use querySelectorAll again if you're supporting IE8 
    j = stars.length; 

    while(j--){ 
     var thisStar = stars[j], 
     radian == thisStar.getAttribute('data-radian'); 
     setStarCoords(thisStar, radius, radian); 
    } 
}