Изменить ориентацию оргструктуры слева направо

Мне нужно изменить ориентацию приведенной ниже диаграммы, чтобы она отображалась слева направо, а не текущая ориентация сверху вниз. Можно ли сделать это, используя span span вместо col span? При подходе сверху вниз все это делается с помощью col span, поэтому я предполагал, что слева направо можно сделать с помощью строки Span, но я не могу начать.

введите описание изображения здесь

Мой текущий код CSS:

div.orgChart table {
    width                 : 100%;
}

div.orgChart tr.lines td.line {
    width                 : 1px;
    height                : 20px;
}

div.orgChart tr.lines td.top {
    border-top            : 1px solid black;    /*dashed*/
}

div.orgChart tr.lines td.left {
    border-right          : 1px solid black;
}

div.orgChart tr.lines td.right {
    border-left           : 0px solid black;
}

div.orgChart tr.lines td.half {
    width                 : 50%;
}


div.orgChart td {
    text-align            : center;
    vertical-align        : top;
    padding               : 0px 2px;
}

Мой текущий код в теле HTML:

<div id='orgChartContainer'>
<div id='orgChart' class='orgChart'>
<table id='myTable' cellpadding='0' cellspacing='0' border='0'>

<tr><td colspan='4'><div>node</div></td></tr>

<tr class='lines'><td colspan='4'>
<table cellpadding='0' cellspacing='0' border='0'><tr class='lines x'><td class='line left half'></td><td class='line right half'></td></table>
</td></tr>

<tr class='lines v'><td class='line left'></td><td class='line right top'></td><td class='line left top'></td><td class='line right'></td></tr>

<tr>
<td colspan='2'>
<table cellpadding='0' cellspacing='0' border='0'><tr><td colspan='2'><div>node 2</div></td></tr>
</table>
</td>
<td colspan='2'>
<table cellpadding='0' cellspacing='0' border='0'><tr><td colspan='2'><div>node 3</div></td></tr></table>
</td>

</tr>
</table>
</div>
</div>
Источник

2 ответа

Решение

Я использовал библиотеку d3.js для разработки собственных организационных диаграмм. Есть рабочие примеры для достижения этой цели с использованием Tree Layout в D3.

Источник

GetOrgChart имеет ориентацию слева направо. Смотрите следующий пример:

http://www.getorgchart.com/Demos/Orientation

Также вы можете настроить узлы в соответствии с вашими потребностями

Источник
Другие вопросы по тегам