D3.jsのforceレイアウトで入れ子構造のJSONデータを表示する

Question

いつもお世話になっております。

表題のとおりなのですが、D3.jsのforceレイアウトで、以下のような入れ子構造のJSONデータを表示したいと考えています。

{"name":"サンプルデータ","children":[
    "name":"2020","children":[
        "name":"202004","children":[
            {"name":"20200405","price":"1305"},
            {"name":"20200417","price":"1890"},
            {"name":"20200405","price":"1560"}
        ],
        "name":"202005","children":[
            {"name":"20200509","price":"2030"},
            {"name":"20200524","price":"1990"},
            {"name":"20200527","price":"2005"}
        ]
    ],
    "name":"2021","children":[
        "name":"202104","children":[
            {"name":"20210405","price":"1305"},
            {"name":"20210417","price":"1890"},
            {"name":"20210405","price":"1560"}
        ],
        "name":"202105","children":[
            {"name":"20200509","price":"2030"},
            {"name":"20200524","price":"1990"},
            {"name":"20200527","price":"2005"}
        ]
    ]
]}

Tree構造をそのままForce構造にするように、

• 「サンプルデータ」からのびたリンクが「2020」と「2021」に繋がる
• 「2020」からのリンクは「202004」「202005」に、「2021」からのリンクは「202104」「202105」に繋がる
• 「202004」からは「20200405」「20200417」「20200405」に繋がる、他も同様に

といったForceレイアウトを作りたいと考えています。

その際、

1 .data()でどのように指定したらいいのか（.data(json,"name")ではできませんでした。当たり前かもしれませんが……）
2 あるいは階層なしのJSONデータを作り直しnodeとlinkを全て手打ちすべきなのか
3 他にもっといい方法がある

以上のことを知りたいです。
nodeにクリックアクションをつけて末端の表示させるといったこともできれば行いたいので、2番目の方法についてはあまり使いたくないと感じていますが、他に方法が思いつかないので書きました。

よろしくお願いします。

Answer 1

こちらを参考に解決しました