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

Question

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

Мой текущий код КСС:

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> 

Answer 1

я использовал d3.js библиотеку, чтобы развивать свои собственные организационные диаграммы. Для этого используются рабочие примеры с использованием макета дерева в D3.

Answer 2

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

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

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