作品 ID: 1965

徳川将軍家の家系図

公開

クジラ飛行机氏のPython+JSON本の中のやつをナゼかなでしこでやってみるとゆう暴挙。vis-network.jsとゆうネットワーク図が描ける的なライブラリを見つけたので使ってみたけど、家系図的なものには向かないのか、同レベル(兄弟とか)で複数人が結婚しているとたちまち表示がカオスになっちゃうのねん💧　それとも他にまだ設定あるのか・・・。（両親を同一レベルに並べるには、全てのノードにレベルを設定しなきゃなようなので、元のJSONデータにlevelの項目を追加。世代の離れた子孫を表示する時も便宜上childrenで済ましています。超手抜きで子は男のみ表示する設定）。とりあえず頑張って15代をそれっぽく表示させた。でも、ちょっと養子関係を結んで表示させたいと思ったら、たちまちぐっちゃになってツラみ。

ソース

プログラム

！『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ネットワーク描画。

作品について

作品情報

作品を編集

雪乃☆雫作

ライセンス: CC0（著作権破棄）
形式: wnako
タグ: -
利用バージョン: 3.6.26
アクセス数(累計): 12
アクセス数(今月): 12
更新日時: 2023/01/16 15:30 編集: 2024/11/13 14:36

⭐

作品公開情報

交流

コメントを取得中...