MLM 개념에 대한 트리를 개발 중입니다.
사용자 계층을 보여주는 데이터베이스에서 가져온 트리를 표시하기 위해 노력했습니다. 이제 부모와 자녀를 연결하고 싶습니다. 이진 트리이므로 각 부모에는 두 개의 자식이 있습니다.
내 코드는 JsFiddle에 있습니다 : https://jsfiddle.net/7u9L1bfx/
Jsfiddle의 CSS
<center>
<div style='width:60%'>
<div class='user' id='1'>
<p> 1 </p>
</div>
<div style='clear:both;'></div>
<div class='col2 child' id='1'>
<div class='user'>
<p>2</p>
</div>
</div>
<div class='col2 child' id='1'>
<div class='user'>
<p>5</p>
</div>
</div>
<div style='clear:both;'></div>
<div class='col3 child' id='2'>
<div class='user'>
<p>3</p>
</div>
</div>
<div class='col3 child' id='2'>
<div class='user'>
<p>4</p>
</div>
</div>
<div class='col3 child' id='5'>
<div class='user'>
<p>6</p>
</div>
</div>
<div class='col3 child' id='5'>
<div class='user'>
<p>8</p>
</div>
</div>
<div style='clear:both;'></div>
<div class='col4 child' id='3'>
<div class='user'>
<p>Blank</p>
</div>
</div>
<div class='col4 child' id='3'>
<div class='user'>
<p>Blank</p>
</div>
</div>
<div class='col4 child' id='4'>
<div class='user'>
<p>Blank</p>
</div>
</div>
<div class='col4 child' id='4'>
<div class='user'>
<p>Blank</p>
</div>
</div>
<div class='col4 child' id='6'>
<div class='user'>
<p>7</p>
</div>
</div>
<div class='col4 child' id='6'>
<div class='user'>
<p>Blank</p>
</div>
</div>
<div class='col4 child' id='8'>
<div class='user'>
<p>Blank</p>
</div>
</div>
<div class='col4 child' id='8'>
<div class='user'>
<p>Blank</p>
</div>
</div>
<div style='clear:both;'></div>
</div>
</center>
단순히 선을 그릴 수있는 css / javascript / jquery 함수가 필요합니다. 직접 루프에 넣겠습니다.
당신이 가질 유일한 진짜 옵션은 <canvas>
. 큰 캔버스 위에 모든 요소를 쌓을 수 있으며 그 위치를 계산하고 선을 그려야합니다.
HTML은 다음과 같습니다.
<div id="container">
<canvas id="canvas">
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>
</div>
그런 다음 컨테이너와 캔버스의 크기를 동일하게 조정 한 다음 그 위에 div를 배치해야합니다. 그런 다음 사업부의 조합을 사용 offsetTop
하고 offsetLeft
, 당신은 자신의 위치를 파악 사용해야합니다 canvas
선을 그리는 그리기 기능을.
이것은 당신에게 기본적인 접근 방식을 제공합니다. 코드 생성에 찌르고 막히면 다른 답변을 게시 할 수 있습니다.
또 다른 대안은 <hr>
요소와 transform
CSS 속성을 사용하여 회전하고 위치를 지정하는 것이지만, 그 수학은 계산하기가 꽤 귀찮고 캔버스 접근 방식만큼 깨끗하지 않을 것입니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다