Rekursiv (oder iterativ) eine verschachtelte HTML-Tabelle mit d3.js erstellen?

Ich habe eine Reihe verschachtelter JSON-Strukturen, bei denen die Tiefe und nicht überall der gleiche Schlüsselsatz variiert:

[
    {
        "name":"bob",
        "salary":10000,
        "friends":[
            {
                "name": "sarah",
                "salary":10000
            },
            {
                "name": "bill",
                "salary":5000
            }
        ]
    },
    {
        "name":"marge",
        "salary":10000,
        "friends":[
            {
                "name": "rhonda",
                "salary":10000
            },
            {
                "name": "mike",
                "salary":5000,
                "hobbies":[
                    {
                        "name":"surfing",
                        "frequency":10
                    },
                    {
                        "name":"surfing",
                        "frequency":15
                    }
                ]
            }
        ]
    },
    {
        "name":"joe",
        "salary":10000,
        "friends":[
            {
                "name": "harry",
                "salary":10000
            },
            {
                "name": "sally",
                "salary":5000
            }
        ]
    }
]

Ich wollte D3 verwenden, um dies als geschachtelte HTML-Tabellen zu rendern. Die Spalte "Freunde" enthält beispielsweise Tabellen mit dem Namen und dem Gehalt der Freunde der Person, auf die in der Zeile verwiesen wird. Manchmal hat eine dieser Tabellen eine andere Ebene einer Untertabelle.

Ich stelle mir vor, dies geschieht durch rekursives Erstellen von Tabellen. Ich habe ein Python-Programm geschrieben, das eine JSON-Struktur wie diese annimmt und Tabellen in Tabellen rendert, und der einfachste Weg, dies zu tun, war rekursiv. Ich sehe auf der d3.js Dokumentation eine.each() was Sie anrufen können, was ich sicher brauche, ich brauche nur einen kleinen Schub, um dorthin zu gelangen (https://github.com/mbostock/d3/wiki/Selections#wiki-each).

Gibt es eine gute Möglichkeit, dies in D3 zu tun? Ich fand dieses großartige Beispiel für das Rendern einer 2D-Datenmatrix als TabelleErstellen einer mit einer CSV-Datei verknüpften Tabelle. Mit diesem Tutorial konnte ich die äußerste Ebene dieser Datenstruktur als Tabelle darstellen, aber ich bin nicht sicher, wie ich nach Bedarf in Ebenen rekursiv vorgehen kann. Ab sofort werden sie in der Tabelle nur als "Objekt" angezeigt da ich sie nicht anders behandle als normale Zeichenketten und Zahlen.

Ich habe auch diese andere Frage / Antwort gefunden, die meiner Frage ähnelt, aber ich verstehe Javascript nicht gut genug, um zu sehen, wo / wie die Rekursion stattfindet, und passe die Lösung an meine Bedürfnisse an:Wie verarbeite ich Daten, die in D3 auf mehreren Ebenen verschachtelt sind?. Alle Ratschläge oder Verweise auf Tutorials zur rekursiven oder iterativen Verarbeitung verschachtelter Baumstrukturen wie JSON-Datenstrukturen in D3 wären sehr willkommen!

Antworten auf die Frage(1)

Ihre Antwort auf die Frage