Ну, начнём с разрыва шаблона - это не дерево.
У нас двое родителей у каждой ноды, любое количество детей, а ещё могут быть инцесты...
Не дерево, но граф.
Вот вам песочница с готовым примером(по-другому ссылка не вставилась):
http://cpettitt.github.io/project/dagre-d3/latest/demo/interactive-demo.html?graph=%2F*%20Example%20*%2F%0Adigraph%20%7B%0A%20%20%20%20%2F*%20Note%3A%20HTML%20labels%20do%20not%20work%20in%20IE%2C%20which%20lacks%20support%20for%20<foreignObject>%20tags.%20*%2F%0A%20%20%20%20node%20%5Brx%3D5%20ry%3D5%20labelStyle%3D"font%3A%20300%2014px%20%27Helvetica%20Neue%27%2C%20Helvetica"%5D%0A%20%20%20%20edge%20%5BlabelStyle%3D"font%3A%20300%2014px%20%27Helvetica%20Neue%27%2C%20Helvetica"%5D%0A%20%20%20%20yourvirtualnode%20%5Bshape%3Dcircle%2Cwidth%3D.01%2Cheight%3D.01%2Clabel%3D""%5D%0A%20%20%20%20%0A%09"Отец%20жены"%20->%20"Жена"%3B%0A%09"Мать%20жены"%20->%20"Жена"%3B%0A%09"Отец%20мужа"%20->%20"Муж"%3B%0A%09"Мать%20мужа"%20->%20"Муж"%3B%0A%09%0A%20%20%20%20"Муж"%20->%20yourvirtualnode%20%5Barrowhead%3Dnone%5D%0A%20%20%20%20"Жена"%20->%20yourvirtualnode%20%5Barrowhead%3Dnone%5D%0A%20%20%20%20%0A%20%20%20%20yourvirtualnode%20->%20"Ребёнок%201"%0A%20%20%20%20yourvirtualnode%20->%20"Ребёнок%202"%0A%20%20%20%20yourvirtualnode%20->%20"Ребёнок%203"%0A%7D%0A%20%20
Описание синтаксиса смотреть тут:
www.graphviz.org/content/dot-language
Сама либа на D3:
https://github.com/cpettitt/dagre-d3
И ещё одна реализация:
https://github.com/mdaines/viz.js