！『https://n3s.nadesi.com/plain/vis_network.nako3』を取り込む。 DOM親要素の「幅」に「100%」をDOMスタイル設定。 DOM親要素の「高さ」に「800px」をDOMスタイル設定。 描画中キャンバスの「高さ」に０をDOM属性設定。 元データ＝[ { "level": 0, "parents": ["徳川家康(初代将軍)", "西郷局"], "children": ["義直(尾張家)","頼宣(紀州家)","頼房(水戸家)","秀忠(2代将軍)"] }, { "level": 1, "parents": ["秀忠(2代将軍)", "お江"], "children": ["家光(3代将軍)",] }, { "level": 2, "parents": ["家光(3代将軍)", "お楽の方"], "children": ["家綱(4代将軍)"] }, { "level": 2, "parents": ["家光(3代将軍)", "お玉"], "children": ["綱吉(5代将軍)"] }, { "level": 2, "parents": ["家光(3代将軍)", "お夏"], "children": ["綱重"] }, { "level": 3, "parents": ["綱重", "保良"], "children": ["家宣(6代将軍)"] }, { "level": 4, "parents": ["家宣(6代将軍)", "お喜代"], "children": ["家継(7代将軍)"] }, { "level": 1, "parents": ["頼宣(紀州家)"], "children": ["光貞"] }, { "level": 2, "parents": ["光貞"], "children": ["吉宗(8代将軍)"] }, { "level": 3, "parents": ["吉宗(8代将軍)"], "children": ["家重(9代将軍)","宗武(田安家)","宗尹(一橋家)"] }, { "level": 4, "parents": ["家重(9代将軍)"], "children": ["家治(10代将軍)","重好(清水家)"] }, { "level": 4, "parents": ["宗尹(一橋家)"], "children": ["治済"] }, { "level": 5, "parents": ["治済"], "children": ["斉敦(一橋家)","家斉(11代将軍)"] }, { "level": 6, "parents": ["家斉(11代将軍)","妙操院"], "children": ["斉順(清水家)"] }, { "level": 6, "parents": ["家斉(11代将軍)","照子"], "children": ["家慶(12代将軍)"] }, { "level": 7, "parents": ["家慶(12代将軍)","堅子"], "children": ["家定(13代将軍)"] }, { "level": 7, "parents": ["斉順(清水家)"], "children": ["家茂(14代将軍)"] }, { "level": 5, "parents": ["頼房(水戸家)"], "children": ["治紀"] }, { "level": 6, "parents": ["治紀"], "children": ["斉昭"] }, { "level": 7, "parents": ["斉昭"], "children": ["慶喜(15代将軍)"] }, ] 変数 ノード＝空配列。 変数 エッジ＝空配列。 元データを反復 世代＝対象["level"] 子供達＝対象["children"]。 父＝対象["parents"][0]。 母＝空。 もし、(対象["parents"]の要素数)≧2ならば、 母＝対象["parents"][1]。 //違えば、 //もし、(子供達の配列要素数)＞０ならば、母＝「{父}妻」。 ここまで。 接続点＝「{父}_{母}」 # 親の処理 もし、(父がノードに人物存在)＝いいえならば、 # 子が父になるので重複させない ノードに{ id: 父, label: 父, group: '父', level:世代*2}を配列追加。。。 もし、(母≠空)かつ((母がノードに人物存在)＝いいえ)ならば、 ノードに{ id: 接続点, group: '点', level:世代*2}を配列追加。 ノードに{ id: 母, label: 母, group: '母', level:世代*2}を配列追加。 エッジに{from: 父, to: 接続点,smooth: TRUE}を配列追加。 エッジに{from: 母, to: 接続点}を配列追加。 ここまで。 # 子の処理 もし、((子供達の配列要素数)＞０)ならば、 接続点２＝「{父}_{母}_子」 ノードに{ id: 接続点２, group: '点', level:世代*2+1}を配列追加。 # 兄弟がそれぞれ結婚して子をもうけた場合の表示がカオスすぎるので、母が空の時は父から直接子につなぐようにする。 もし、母≠空ならば、 エッジに{from: 接続点, to: 接続点２}を配列追加。 違えば、 エッジに{from: 父, to: 接続点２}を配列追加。 ここまで。 ここまで。 子供達を反復 子＝対象。 もし、(子がノードに人物存在)＝いいえならば、 # 子が次の父になってつながっていくだけのサンプルデータをテキスト通りに表示するのが目的なので手抜きで娘の場合を考慮してない。 ノードに{ id: 子, label: 子, group: '父', level:世代*2+2}を配列追加。。。 エッジに{from: 接続点２, to: 子, arrows: 'to'}を配列追加。 ここまで。 ここまで。 //ノードをJSONエンコード整形して表示 //エッジをJSONエンコード整形して表示 # 人物名を直でidにしており、idが重複するとエラーなるので。 ●(idがAに)人物存在 Aを反復 もし、対象["id"]＝idならば、はいで戻る。 ここまで。 いいえで戻る。 ここまで。 # オプション visネットワークオプション＝{ physics : FALSE, //ぷよんぷよんと動くのを止める clickToUse : TRUE, //マウスで動かすのを止める groups : { //ノードのグループ設定 父 :{ shape: 'box', color: { border: 青色, background: 'skyblue',}, font: { color: 青色} }, 母 :{ shape: 'box', shapeProperties: { borderRadius: 20},//角丸設定。boxにだけ有効。 color: { border: 紫色, background: 'pink',}, font: { color: 赤色} }, 点 :{ //子への接続点 shape: 'dot', size: 1, color: { border: 黒色, background: 黒色,} } }, edges:{ //エッジの設定 color : 黒色 , smooth: { enabled: FALSE, type: "diagonalCross",//'dynamic', 'continuous', 'discrete', 'diagonalCross', 'straightCross', 'horizontal', 'vertical', 'curvedCW', 'curvedCCW', 'cubicBezier' roundness: 0.3 } }, layout:{ hierarchical: {//階層レイアウト enabled: TRUE, levelSeparation : 60,//異なるレベル間の距離 nodeSpacing: 100,//自由軸上の節点間の最小距離 direction: 'UD',// UD, DU, LR, RL } } }。 # ネットワーク描画（描画先はDOM親要素） ノードとエッジでvisネットワーク描画。