Question

好吧，所以我的OrgChart遇到了两个问题。 OrgChart拥有它需要的所有元素，但现在我不知道如何完成它。基本上，我已经将图表分成了几行，这些行决定了图表特定成员的权力级别（level1，level2等等），从那里我不知道如何正确地将level3中的元素定位在4级元素在正确的位置，或者甚至可以用我写的当前HTML。

[查看下面的CODEPEN和图片说明链接]

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

行
我需要一些方法从父母到孩子画线。任何方法都可以工作（基于CSS，基于JS），但我绝对没有办法做到这一点。如果网站规模发生变化，真正的问题是维持线路。

响应速度
目前还不是设计的一个重要部分，但我想记住这一点......即使是现在它也很难回应。我认为我最好的选择是通过JS完全改变某些尺寸的块的布局，但我仍然不确定这是不是一个好主意。对此的任何想法都会很好，但它不一定是我现在需要解决的问题的重要部分。

最后但并非最不重要的是，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数据源来构建树状层次结构的功能将在OrgChart的0.9.9版本中提供。

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

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

Answer 2

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

示例功能：

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

组织结构图;固定水平定位？画线？

2 个答案: