javascript - 组织结构图；固定水平定位？和画线？

Question

好吧，我的 OrgChart 遇到了两个问题。 OrgChart 具有它需要的所有元素，但现在我不确定如何完成它。基本上，我已将图表分成几行，以确定图表中特定成员的权力级别(level1、level2 等...)，从那里我不知道如何正确地将 level3 中的元素放置在来自第 4 级的元素在他正确的位置，或者甚至可以使用我编写的当前 HTML。

[请参阅下面的链接以获取 CODEPEN 和图像描述]

---

水平定位
我试图在两种不同的情况下定位我的元素:
在一种情况下，父元素将简单地与所选的子元素垂直排列。
在第二种情况下，我需要父元素位于两个特定子元素之间的中央。

线条
我需要一些方法来划清 parent 与 child 之间的界限。任何方法都可以(基于 CSS、基于 JS)，但我绝对没有好的方法来做到这一点。如果网站大小发生变化，真正的问题将是维护线路。

响应能力
目前还不是设计的很大一部分，但我想记住这一点……即使现在它的响应速度也很糟糕。我在想我最好的选择是通过 JS 完全改变某些尺寸的 block 的布局，但我仍然不确定这是否是个好主意。对此有任何想法都很好，但这不一定是我现在需要解决的问题的重要组成部分。

最后但同样重要的是，the current code ...
还有一个 image depicting我正在努力实现的目标。

非常感谢。

<div class="content">
    <figure class="org-chart cf">
        <ul class="dcca">
            <li>
                <ul class="level1">
                    <li><a class="employee" href="#dir"><span>Director</span></a></li>
                </ul>
                <ul class="level2">
                    <li><a class="employee" href="#ad"><span>Assistant to the Director</span></a></li>
                    <li><a class="employee" href="#dd"><span>Deputy Director</span></a></li>
                </ul>
                <ul class="level3">
                    <li><a class="employee" href="#senior-ad1"><span>Senior Associate Director</span></a></li>
                    <li><a class="employee" href="#senior-ad2"><span>Senior Associate Director</span></a></li>
                </ul>
                <ul class="level4">
                    <li><a class="employee" href="#associate-d1"><span>Associate Director</span></a></li>
                    <li><a class="employee" href="#associate-d2"><span>Associate Director</span></a></li>
                </ul>
                <ul class="level5">
                    <li><a class="employee" href="#deputy-ad"><span>Deputy Associate Director</span></a></li>
                </ul>
                <ul class="level6">
                    <li><a class="employee" href="#assistant-d1"><span>Assistant Director</span></a></li>
                    <li><a class="employee" href="#assistant-d2"><span>Assistant Director</span></a></li>
                    <li><a class="employee" href="#assistant-d3"><span>Assistant Director</span></a></li>
                    <li><a class="employee" href="#assistant-d4"><span>Assistant Director</span></a></li>
                </ul>
                <ul class="level7">
                    <li><a class="employee" href="#consumer-laws"><span>Consumer Laws & Regulations</span></a></li>

                    <li><a class="employee" href="#examiner-training"><span>Examiner Training</span></a></li>
                    <li><a class="employee" href="#supervision-admin"><span>Supervision Administration</span></a></li>
                    <li><a class="employee" href="#bank-oversight"><span>Reserve Bank Oversight</span></a></li>

                    <li><a class="employee" href="#fair-lending"><span>Fair Lending Enforcement</span></a></li>
                    <li><a class="employee" href="#unfair-acts"><span>Unfair & Deceptive Acts or Practices Enforcement</span></a></li>
                    <li><a class="employee" href="#supervisory-policy"><span>Supervisory Policy & Outreach</span></a></li>
                    <li><a class="employee" href="#applications"><span>Applications</span></a></li>

                    <li><a class="employee" href="#community-dev"><span>Community Development</span></a></li>
                    <li><a class="employee" href="#policy-analysis"><span>Policy Analysis</span></a></li>

                    <li><a class="employee" href="#consumer-research"><span>Consumer & Community Development Research</span></a></li>
                    <li><a class="employee" href="#info-mgmt"><span>Information Management</span></a></li>

                    <li><a class="employee" href="#admin"><span>Administration</span></a></li>
                    <li><a class="employee" href="#tech-dev"><span>Technology Development</span></a></li>
                </ul>
            </li>
        </ul>
    </figure>
</div>

---

* {
    font-family: 'Roboto Condensed', sans-serif;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
}

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

.content {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0;
}

a {
    text-decoration: none;
}

ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

ul a {
    display: block;
    background: #ccc;
    border: 4px solid #000;
    text-align: center;
    overflow: hidden;
    font-size: .7em;
    text-decoration: none;
    font-weight: bold;
    color: #333;
    height: 70px;
    margin-bottom: -26px;
    box-shadow: 4px 4px 9px -4px rgba(0,0,0,0.4);
    -webkit-transition: all linear .1s;
    -moz-transition: all linear .1s;
    transition: all linear .1s;
}

ul a span {
    top: 50%;
    margin-top: -0.7em;
    display: block;
}

.employee:hover {
    border: 4px solid blue;
}

.level1 > li > a{
    width: 70px;
    margin: auto;
}


.level2 > li > a {
    width: 70px;
    margin: 0 auto;
    display: inline-block;
}

.level3 > li > a {
    width: 70px;
    margin: 0 auto;
    display: inline-block;
}

.level4 > li > a {
    width: 70px;
    margin: 0 auto;
    display: inline-block;
}

.level5 > li > a {
    width: 70px;
    margin: 0 auto;
    display: inline-block;
}

.level6 > li > a {
    width: 70px;
    margin: 0 auto;
    display: inline-block;
}

.level7 > li > a {
    width: 70px;
    margin: 0 auto;
    display: inline-block;
}

.level2 {
    margin-top: 15px;
}

.level3 {
    margin-top: 15px;
}

.level4 {
    margin-top: 15px;
}

.level5 {
    margin-top: 15px;
}

.level6 {
    margin-top: 15px;
}

.level7 {
    margin-top: 15px;
}

ul.dcca {
  text-align:center;
}

ul.dcca li {
  display:inline-block;
}

Answer 1

我想我明白你的意思了。 OrgChart是满足您需求的纯 dom 解决方案。

不幸的是，这个插件的当前版本只能接收 json 数据源，不能直接将嵌套的 ul 结构转换为 orgchart。我相信利用嵌套的 ul 数据源构建树状层次结构的功能将在 0.9.9 版本的 OrgChart 中可用。

OrgChart 创建的组织结构图允许您展开/折叠层次结构、自定义每个节点的内部结构、导出当前层次结构等。

简而言之，希望您喜欢开源。