grafik simpul adalah sebuah grafik yang terlihat seperti molekul-molekul yang saling terkait seperti contoh gambar dibawah ini :
oke pertanyaan, bagaimana cara membuatnya ??? langsung saja ya kita bahas satu persatu .
- untuk memulai siapkan dulu file-file berikut ini jquery, arbor.js, graphics.js , dan renderer semuanya itu bisa anda download di github . file contoh disertakan pula didalamnya.
- selanjutnya buat file html kemudian tambahkan dibagian head jquery, arbor.js, graphics.js dan renderer
- buat sebuah kanvas di antara <body></body>
<canvas id="viewport" width="800" height="600"></canvas>
- sampai disini anda sudah siap membuat grafik simpul yang pertama. tambahkan tag untuk javascript dibagian bawah canvas
<script language="javascript" type="text/javascript"></script>
- masukan scriipt berikut diantara tag script untuk initialize system arbor
var sys = arbor.ParticleSystem(1000, 400,1);
sys.parameters({gravity:true}); - kemudian setting renderer untuk menggunakan canvas, karena id dari canvas adalah viewport maka nantinya graph akan di render ke elemen id tersebut.
sys.renderer = Renderer("#viewport") ; - berikutnya setelah perintah renderer siap, kita akan buat suatu node Animals yang berwarna merah , perintahnya adalah sebagai berikut :
var animals = sys.addNode('Animals',{'color':'red','shape':'dot','label':'Animals'}); - akan terbentuk bulatan Animals berwarna merah seperti gambar dibawah ini :
- langkah selanjutnya adalah linking nodes yaitu menghubungkan node-node. sebagai contoh disini saya akan menambahkan node cat berwarna ungu mudah dan dogs berwarna hijau. tambahkan perintah sebagai berikut :
var dog = sys.addNode('dog',{'color':'green','shape':'dot','label':'dog'});
var cat = sys.addNode('cat',{'color':'blue','shape':'dot','label':'cat'}); - kurang lebih hasilnya seperti gambar diatas, nah node-node tersebut masih terpisah belum terhubung. sekarang saya akan menambahkan garis atau menghubungkan node-node tersebut, sebagai contoh cat akan terhubung dengan animals, dog terhubung dengan animals. untuk melakukan ini kita menggunakan perintah addEdge sebagai berikut :
sys.addEdge(animals, dog);
sys.addEdge(animals, cat); - artinya menambahkan menghubungkan dog dan cat kepada animals.
Oke sampai disini ya cara membuat node dengan arbor.js. disini saya jelaskan juga perbedaan antara yang dibahas diartikel ini dengan sourcecode yang anda download dari github. kalau di artikel ini membuat nodenya adalah di file html tapi di dalam tag javascript, kalau di sourcecode contoh dari github. anda bisa bongkar difile site.js. jika anda tidak puas dengan penjelasan diatas anda bisa langsung membaca dokumentasinya di http://arborjs.org/reference.
silahkan isi komentar anda disini
EmoticonEmoticon
Note: Only a member of this blog may post a comment.