如何在html中的两个div之间绘制线条

Question

我正在为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函数。我会把它放到循环中。

Answer 1

您唯一真正的选择是使用<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放在其上面。然后使用div offsetTop和offsetLeft的组合，你必须弄清楚他们的位置，然后使用canvas绘制函数绘制线条。

这将为您提供基本方法。尝试创建代码，如果卡住，可以发布另一个答案。

另一种选择是使用<hr>元素和transform CSS属性来旋转和定位，但是数学运算会非常烦人，但仍然不会像画布方法。

Answer 2

绘制线条的一种可能性是<hr>标记。

HR Tag