Organigrammausrichtung von links nach rechts ändern

Question

Ich muss die Ausrichtung des unteren Diagramms so ändern, dass es von links nach rechts statt der aktuellen Ausrichtung von oben nach unten angezeigt wird. Ist es möglich, dies zu tun, indem Sie row span statt col span verwenden. In der Top-to-Bottom-Herangehensweise wird alles mit col span durchgeführt, also ging ich davon aus, dass von links nach rechts mit der Zeilenspanne gearbeitet werden könnte, aber ich kann keinen Anfang machen.

Mein aktueller Code CSS ist:

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; 
} 

Mein aktueller Code in HTML-Körper ist:

<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

I d3.js Bibliothek verwendet, um meine eigene Organigramme zu entwickeln. Dazu gibt es Arbeitsbeispiele, die das Baumlayout in D3 verwenden.

Answer 2

GetOrgChart hat links nach rechts Ausrichtung Option. Siehe das folgende Beispiel:

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

Aslo Sie die Knoten pro Ihre Bedürfnisse anpassen können