OrgChart；固定水平定位？画线呢？

Question

好的，我的OrgChart有两个问题。OrgChart拥有它所需的所有元素，但现在我不知道如何完成它。基本上，我已经将图表分成了几行，这些行决定了图表中某个特定成员(level1、level2等)的权力级别，从这里我不知道如何将level3中的元素正确地定位在4级的元素之上--这是正确的位置，甚至可能与我所编写的当前HTML相关联。

关于CODEPEN和图像描述，请参阅下面的LINKS

水平定位

我试图在两个不同的情况下定位我的元素：

在一种情况下，父元素将与选择的子元素垂直排列。

在第二种情况下，我需要父元素在两个特定的子元素之间居中。

​

线

我需要一些方法从父母到孩子之间划清界限。任何方法都可以工作(基于CSS，基于JS)，但我绝对没有好的方法来做到这一点。真正的问题是，如果站点大小发生变化，则需要维护这些线路。

Responsiveness

还不是设计的很大一部分，但我想记住这一点.即使是现在，它的反应能力也很差。我认为我最好的选择是通过JS完全改变一定尺寸的块的布局，但我仍然不确定这是否是一个好主意。任何关于这方面的想法都会很好，但这并不一定是我现在需要解决的一个重要问题。

最后但并非最不重要，当前代码..。

以及我想要完成的图像描绘。

非常感谢。

<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数据源来构建类似树的层次结构的特性将在OrgChart的0.9.9版本上提供。

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

总之，希望你喜欢开源.

​

​

Answer 2

尝试查看我在github：OrgChart.svg上的解决方案--图表是在SVG中完全呈现的。支持小费/堆叠策略，这可能是创建良好的组织结构图的最著名的解决方案。如果能帮上忙我会很高兴的。它是基于snap.svg的。

示例特性：

• 使用自己的SVG片段进行定制样式设计，例如在中
• 翻转/堆叠以处理一个级别上的大量节点
• 它是开源的，你可以在任何项目中免费使用它！

​

​