Creating family trees using HTML / JS / CSS / PHP / MySQL

I was commissioned to build something similar to this, and I need some suggestions / opinions for an effective solution:

http://familyecho.com

So far, I have been trying to present my data using the Nested Set Model, but I do not think that with this it would be possible to have several parent nodes. Almost every example that I saw includes only one parent with several children. I also tried using the Google Visualization Organization Chart, which looks great and solves almost all display problems, but I run into the same problem when nodes support only one parent. Therefore, I decided that I was trying to build something on my own and well, I was not very lucky with this.

Regarding the correct display of the tree, one of the biggest problems is figuring out how to get the nodes located in the right places. Please note that in Family Echo, the parent nodes are positioned correctly depending on how many children they have so that they do not collide with other neighboring nodes. I tried at least to repeat this behavior, so I would really appreciate any advice. What I tried is a loop through an array like the one below that contains all the data about the family:

    {
    508 : {
        "id" : 1,
        "name" : "Son",
        "Parent" : {
            17864 : {
                "id" : 2,
                "name" : "Father"
            },
            65926 : {
                "id" : 3,
                "name" : "Mother"
            }
        }
    },
    17864 : {
        "id" : 2,
        "name" : "Father",
        "Partner" : {
            65926: {
                "id" : 3,
                "name" : "Mother"
            }
        },
        "Son/Daughter" : {
            508 : {
                "id" : 1,
                "name" : "Son"
            }
        }
    },
    65926 : {
        "id" : 3,
        "name" : "Mother",
        "Partner" : {
            17864: {
                "id" : 2,
                "name" : "Father"
            }
        },
        "Son/Daughter" : {
            508 : {
                "id" : 1,
                "name" : "Son"
            }
        }
    }
}

(508, 17864, 65926 act as unique random keys for each family member), and then using some recursive functions, create a second clean variable without repetition and including the calculated x / y coordinates for each member. An example of the second variable below:

{
    508 : {
        "id" : 1,
        "name" : "Son",
        "x" : 0,
        "y" : 0
    },
    17864 : {
        "id" : 2,
        "name" : "Father",
        "x" : 1,
        "y" : -1
    },
    65926 : {
        "id" : 3,
        "name" : "Mother",
        "x" : -1,
        "y" : -1
    }
}

DIVs CSS X Y. , (, , - google org, )?