Guide to Insert|Delete|Update node

[dariush-fathie]

HI YOU ARE AMAZING It is the most beautiful tree I found.

In fact, I am new to d3 world and if you can help me how to insert child node or delete or update I will appreciate you

Anyway THANKS

[BenPortner]

Hi @dariush-fathie,

first of all, I apologize for the late answer. For some reason I did not receive a notification by Github. I hope I will next time!

To your question: Editing the tree is done simply by editing the data.js in the repo. The file structure is somewhat borrowed from GEDCOM but not the same. It looks as follows:

data = {
    "persons": {
        "id1": { "id": "id1", "name": "Adam", "birthyear": 1900, "deathyear": 1980, "own_unions": ["u1"] },
         ...
    },
    "unions": {
        "u1": { "id": "u1", "partner": ["id1", "id2"], "children": ["id3", "id4", "id11"] },
        ...
    },
    "links": [
        ["id1", "u1"],
        ["u1", "id3"],
        ...
    ]
}

All data is stored in one object called data (duh). It has three parts: persons, unions, and links. The first two parts represent the two node types that exist in the tree. Every entry in persons represents a person that will appear in the tree as a circle. Every entry in unions represents a family consisting of one or two partners and their children. Union nodes are not visible in the tree. The last part, links, represents the links between the nodes. There must be one link for every connection between a union and a person.

Let's assume, you want to add a person "George" to the tree. To keep things simple, let's assume that "George" is the child of "Adam" and "Berta" from the existing dataset and George has no partner or children. Now, to add George, you first add a line to the persons object that looks like so:

"something": { "id": "something", "name": "George", "birthyear": 0, "deathyear": 100, "own_unions": [] }

As you can see, the own_unions attribute is an empty array because George has no family on his own. Next, let's add the connection to his parents. Berta and Adam already have a family with ID u1. Let's add George to that family. To do this, we simply add his id to the children array of the corresponding union. It then looks like this:

"u1": { "id": "u1", "partner": ["id1", "id2"], "children": ["id3", "id4", "id11", "something"] },

This step makes sure that George will be considered the child of Berta and Adam. Unfortunately, this is not enough to make sure that a connection will be drawn in the tree. For this to happen, one extra step is necessary: You have to add a link (third part of the data object) between the parent union and George like so:

["u1", "something"]

You can see that the file format contains redundant information, which makes it a little cumbersome to manipulate. This is something that I would like to change in the long run. If you figure out an easier way, let me know ;)

To delete a node, you would have to delete the entry in the persons part, and then delete all occurrences of the person's id from the unions and links parts.

I hope this helps you to set up your own tree. Let me know how it goes!

Cheers, Ben

[dariush-fathie]

Thank you Ben I will try it