化学には全く明るくないのですが、force layoutをいじくっているうちに、構造式に見えたので、ヘキサクロロシクロヘキサンを表現してみました。
ヘキサクロロシクロヘキサンを選んだ理由としては、形が作りやすそうだったからですw
ちなみに、ヘキサクロロシクロヘキサンは、ベンゼンに光を当てながら塩素を通じるとできるらしいです……ふーん。
こんな感じにできました。
なんか表記が間違ってたら、化学方面の方々、教えてください。
うまく六角形が保たれるように引力を調整するのが難しかったかなと。ソースコードはこちら。
さて、まずは、ノードを準備します。化学式は、C6CL6H6なので、それぞれ6個ずつ。そして、結合部分は、18箇所。その結合部分の線の太さとして、pointを用意してましたが、今回は一定の太さにしたので、必要ありませんでしたね。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
var list = { nodes : [ { name : "C" },//0 { name : "C" }, { name : "C" }, { name : "C" }, { name : "C" }, { name : "C" },//5 { name : "Cl" },//6 { name : "Cl" }, { name : "Cl" }, { name : "Cl" }, { name : "Cl" }, { name : "Cl" },//11 { name : "H" },//12 { name : "H" }, { name : "H" }, { name : "H" }, { name : "H" }, { name : "H" }//17 ], links : [ { source : 0, target : 1, point : 5 }, { source : 1, target : 2, point : 5 }, { source : 2, target : 3, point : 5 }, { source : 3, target : 4, point : 5 }, { source : 4, target : 5, point : 5 }, { source : 5, target : 0, point : 5 }, { source : 0, target : 12, point : 5 }, { source : 1, target : 13, point : 5 }, { source : 2, target : 14, point : 5 }, { source : 3, target : 15, point : 5 }, { source : 4, target : 16, point : 5 }, { source : 5, target : 17, point : 5 }, { source : 0, target : 6, point : 5 }, { source : 1, target : 7, point : 5 }, { source : 2, target : 8, point : 5 }, { source : 3, target : 9, point : 5 }, { source : 4, target : 10, point : 5 }, { source : 5, target : 11, point : 5 } ] }; |
そして、Force Layoutの設定部分。パラメーターの中身を詳しく見てみます。
1 2 3 4 5 6 7 8 9 |
var force = d3.layout.force() .nodes(list.nodes) .links(list.links) .size([svgWidth, svgHeight]) .linkDistance(80)//リンクの距離 .friction(0.9)//摩擦力 .charge(-500)//反発力-引力 .gravity(0.05)//重力 画面の中心に働く重力 .start(); |
ここで、設定しているパロメーターは、4種類。
force.linkDistance()
リンクの距離:ノード間のリンクの長さを指定
force.friction()
摩擦力:値が小さいほど抵抗が少なく収束が早い
force.charge()
反発力⇄引力:マイナスだとノード同士が反発する力、プラスの値だと引き合う力
force.gravity()
重力:画面の中心に働く重力
他のパロメーターは、今回の場合、デフォルトで問題なかったので、省略します。
全てのパロメーターの詳細は、公式からどうぞ。
適当なデータで、別バージョンを作ってみました。こんな感じ。
結合部分の太さを変化させて、関係性を可視化できるんですが、いいデータがなかったので、今回はサンプルだけ。
手法だけ先行しちゃって、可視化したいものってなんだったっけ?となっている。。。順番が逆転しちゃってるなぁ。
コメントは受け付けていません。