Рекурсивно (или итеративно) создать вложенную HTML-таблицу с d3.js?

У меня есть массив вложенных структур JSON, где они имеют разную глубину и не везде одинаковый набор ключей:

[
    {
        "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
            }
        ]
    }
]

Я хотел использовать D3 для рендеринга в виде вложенных HTML-таблиц. Например, в столбце друзей будут таблицы с именем и зарплатой друзей человека, указанного в строке. Иногда одна из этих таблиц будет иметь другой уровень вложенной таблицы.

Я думаю, что способ сделать это путем рекурсивного создания таблиц. Я написал программу на Python, которая принимает структуру JSON, подобную этой, и отображает таблицы в таблицах, и самый простой способ сделать это - рекурсивно. Я вижу на документации d3.js есть.each() То, что вы можете назвать, что, я уверен, это то, что мне нужно, мне просто нужно немного подняться (https://github.com/mbostock/d3/wiki/Selections#wiki-each).

Так есть ли хороший способ сделать это в D3? Я нашел этот отличный пример для рендеринга 2d матрицы данных в виде таблицыСоздание таблицы, связанной с CSV-файлом, С помощью этого урока я смог получить самый внешний уровень этой структуры данных в виде таблицы, но я застрял на том, как рекурсивно переходить на уровни по мере необходимости, на данный момент они просто отображаются как "Объект» в таблице, так как я не рассматриваю их иначе, чем обычные строки и числа.

Также я нашел этот другой вопрос / ответ, который похож на мой вопрос, но я действительно неЯ не достаточно хорошо понимаю javascript, чтобы увидеть, где и как происходит рекурсия, и перенастроить решение в соответствии с моими потребностями:Как мне обрабатывать данные, вложенные в несколько уровней в D3?, Будем весьма благодарны за любые советы или указатели к учебникам по рекурсивной или итеративной обработке вложенного дерева, такого как структуры данных JSON в D3!

Ответы на вопрос(1)

Ваш ответ на вопрос