Ik ben op mijn werk een klein onderzoek begonnen naar relatie diagrammen. Het uittekenen van zo'n diagram, waar je relaties tussen verschillende objecten aangeeft, is niet ingewikkeld. Wil je dit in bijvoorbeeld Flash visueel weer geven dan wordt het een ander verhaal. Ook als je dit nog eens dynamisch wilt hebben.
Hoe ga je dit opzetten, waar begin je? Mijn uitgangspunt was een voorbeeld die ik op internet had gevonden. Op de site van etsy.com is een onderdeel om te zoeken gemaakt met zo'n relatie diagram. Hierin zie je dat de "nodes" opzij gaan wanneer een andere node wordt uitgeklapt. Ik heb veel mogelijkheden bekeken en gezocht om dit te bereiken. Zo kwam ik op inverse kinematics, hittest, etc. Maar hoe pas je dit dan weer toe om zo'n diagram te krijgen? allemaal vragen die ik niet kon beantwoorden.
Ik ben op zoek gegaan naar de achterliggende methode achter zo'n diagram. Als ik eerst weet hoe deze wordt opgebouwd kan ik later de bewegingen toevoegen. Na veel speurwerk kwam ik erachter dat zo'n relatie diagram ook wel een "Force-Directed Graph" genoemd wordt. Ging ik op deze term googlen kreeg ik 103.000 resultaten. Genoeg over te vinden blijkbaar. Toch is het dan weer de kunst om relevante links te vinden. Wat ik het meeste vond waren voorbeelden die gemaakt waren met JavaScript. Op zich niet verkeer aangezien Actionscript op ECMA is gebaseerd net als Javascript. Doordat er echter aparte Javascript bibliotheken gebruikt worden maakt dit het wat lastiger om te vertalen naar Actionscript. Ook het zoeken naar een bestaande vertaling van deze bibliotheken (JSViz) leverde niets op.
Het simpelweg vertalen van iets bestaands is een optie. Maar door mijn nieuwsgierigheid en wil om te begrijpen wat ik nu precies maak zoek ik een klein voorbeeld, een basis, om zo'n Force-directed Graph te maken. Deze heb ik helaas nog niet kunnen vinden. Ook heb ik op verschillende forums gezocht maar ook daar had ik geen resultaat. Wel een aantal topic die hetzelfde wilde weten maar geen reacties daarop.
Ik ben dus nog op zoek naar een oplossing, misschien een tutorial met een basis uitleg over dit onderwerp.
Relevante links: