スゴイっぽい図((force layout))って何 こんな感じの、なんかビヨーンとなってシャキシャキして動くやつ。 説明するより動くものを見てもらった方が早いかも。 作ったdemo やってみた感想 グワングワン動いて楽しい 動的な描画をするのは難しそうだと思ってたが、そうでもなかった。 d3.js自体も難しいものだと避けてきたが、たくさんの人が記事にあげてくれているからググればなんとかなる。 実際に何かに使うには、描画したいデータを必要なフォーマットに直すところがちょっと大変そう。 解説 0. 全ソース 一旦全ソースを貼ってみる。 コピペしていくつかの値をいじってみるだけでも楽しい。 <!DOCTYPE html> <html> <head> <title>d3test</title> <script src="http://d3js.org/d3.v3.min.js" charset=
![d3.jsでスゴイっぽい図(force layout)を作ってみたら思ったより簡単だった件 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/094a7980255c6e56eb29ec70c55318491f328dff/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9ZDMuanMlRTMlODElQTclRTMlODIlQjklRTMlODIlQjQlRTMlODIlQTQlRTMlODElQTMlRTMlODElQkQlRTMlODElODQlRTUlOUIlQjMlMjhmb3JjZSUyMGxheW91dCUyOSVFMyU4MiU5MiVFNCVCRCU5QyVFMyU4MSVBMyVFMyU4MSVBNiVFMyU4MSVCRiVFMyU4MSU5RiVFMyU4MiU4OSVFNiU4MCU5RCVFMyU4MSVBMyVFMyU4MSU5RiVFMyU4MiU4OCVFMyU4MiU4QSVFNyVCMCVBMSVFNSU4RCU5OCVFMyU4MSVBMCVFMyU4MSVBMyVFMyU4MSU5RiVFNCVCQiVCNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9ODdiN2Q5OWQ2YTI5NDFmNjNiZjk4ODc1YjI4Zjg4OWE%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBzaG9raV9raXRhamltYSZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9ODZiZjQyOWU3NmZlYjIyOWY1N2M4MjZhZjA0ODcxNGE%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3Dc1bfd16accf29a4f2d2c45b63de50ca6)