BenPortner / js_family_tree

An interactive family tree visualization using d3-dag
GNU General Public License v3.0
70 stars 30 forks source link

Cannot set property 'points' of undefined #2

Closed JackVed closed 2 years ago

JackVed commented 4 years ago

Hi @BenPortner, I really like your work and I am trying to implement it!

I am using this data set:

data = {
    "persons": {
        "id2": {
            "id": "id2",
            "own_unions": ["u2"],
            "parent_union": "u1",
            "name": "item01",
            "birthyear": 1900,
            "deathyear": 1980,
        },
        "id1": {
            "id": "id1",
            "own_unions": ["u1"],
            "name": "item00",
            "birthyear": 1901,
            "deathyear": 1985,
        },
        "id4": {
            "id": "id4",
            "own_unions": ["u4"],
            "parent_union": "u3",
            "name": "item02",
            "birthyear": 1926,
            "deathyear": 2009,
        },
        "id3": {
            "id": "id3",
            "own_unions": ["u3"],
            "parent_union": "u2",
            "name": "topic00",
            "birthyear": 1902,
            "deathyear": 1970,
        },
        "id6": {
            "id": "id6",
            "own_unions": [],
            "parent_union": "u4",
            "name": "item04",
            "birthyear": 1931,
            "deathyear": 2015,
        },
        "id5": {
            "id": "id5",
            "own_unions": ["u4"],
            "parent_union": "u3",
            "name": "item03",
            "birthyear": 1930,
            "deathyear": 2010,
        },
    },
    "unions": {
        "u1": {
            "id": "u1",
            "partner": ["id1"],
            "children": ["id2"]
        },
        "u2": {
            "id": "u2",
            "partner": ["id2"],
            "children": ["id3"]
        },
        "u3": {
            "id": "u3",
            "partner": ["id3"],
            "children": ["id4", "id5"]
        },
        "u4": {
            "id": "u4",
            "partner": ["id4", "id5"],
            "children": ["id6"]
        },
    },
    "links": [
        ["id1", "u1"],
        ["u1", "id2"],
        ["id2", "u2"],
        ["u2", "id3"],
        ["id3", "u3"],
        ["u3", "id4"],
        ["u3", "id5"],
        ["id4", "u4"],
        ["id5", "u4"],
        ["u4", "id6"],
    ]
};

But i encounter the error:

Uncaught TypeError: Cannot set property 'points' of undefined
    at d3-dag.min.js:2
    at Array.map (<anonymous>)
    at d3-dag.min.js:2
    at B.each (d3-dag.min.js:2)
    at d3-dag.min.js:2
    at l (d3-dag.min.js:2)
    at update (..)
    at SVGGElement.click (..)
    at SVGGElement.<anonymous> (d3.min.js:2)

Why does this error happen?

Thanks in advance.

BenPortner commented 4 years ago

Hi @JackVed!

Congratulations, you discovered the first bug! :balloon:Thanks for reporting 👍😃 It seems d3_dag cannot determine the descendants of the root node if it has one parent. I could get your example to run by adding an extra link:

    "links": [
        ...
        ["id3", "u3"],
        ["id7", "u3"],
        ["u3", "id4"],
        ...
    ]

Of course the code should run with an arbitrary number of parents so I will file a bug report in d3_dag. I will let you know as soon as there is a fix!

Cheers, Ben

JackVed commented 4 years ago

Hi @BenPortner! Thank you for your fast response! I added an extra link like you suggested, and it does fix the error. But I noticed another problem: item02 and item03 should be topic00's children, and the graph does not show that.

error3

Could this be due to the same d3-dag bug? Thanks.

BenPortner commented 4 years ago

Hi @JackVed,

I just pushed some changes that should fix the second issue (link not showing up). Please note: I added a new required attribute to the data.js structure: a field start that contains the id of the first node to be drawn. In your case that would be id4. I also adapted the layout to make sure that nodes do not start to overlap even when there are many nodes in the same generation. Feel free to clone the new version and let me know how it works! 😃

I'm still working on the first issue, so please bear with me 😉

Cheers. Ben

BenPortner commented 4 years ago

Hey @JackVed,

the first bug should now be fixed as well! Try deleting the extra link and the tree should be displayed fine 👍

Thanks again for reporting the bug. js_family_tree is still in an early stage and there is a lot to do. Let me know if you encounter any other problems!

Cheers. Ben

JackVed commented 4 years ago

Hi @BenPortner Thank you for fixing the second issue and the changes! It works!👍

Regarding the first bug, when I delete the extra link I encounter the error:

Uncaught Error: layering wasn't proper
    at l (d3-dag.min.js:2)
    at update (<anonymous>:28:176)
    at <anonymous>:18:402
    at Function.value (..)
    at Function.value (..)
    at Function.value (..)
    at MessagePort.e.port1.onmessage (..)
BenPortner commented 4 years ago

Hi @JackVed,

I cannot reproduce your error (But found another bug on the way. Thanks 😉). Here is the data.js that I use:

data = {
    "start":"id4",
    "persons": {
        "id2": {
            "id": "id2",
            "own_unions": ["u2"],
            "parent_union": "u1",
            "name": "item01",
            "birthyear": 1900,
            "deathyear": 1980,
        },
        "id1": {
            "id": "id1",
            "own_unions": ["u1"],
            "name": "item00",
            "birthyear": 1901,
            "deathyear": 1985,
        },
        "id4": {
            "id": "id4",
            "own_unions": ["u4"],
            "parent_union": "u3",
            "name": "item02",
            "birthyear": 1926,
            "deathyear": 2009,
        },
        "id3": {
            "id": "id3",
            "own_unions": ["u3"],
            "parent_union": "u2",
            "name": "topic00",
            "birthyear": 1902,
            "deathyear": 1970,
        },
        "id6": {
            "id": "id6",
            "own_unions": [],
            "parent_union": "u4",
            "name": "item04",
            "birthyear": 1931,
            "deathyear": 2015,
        },
        "id5": {
            "id": "id5",
            "own_unions": ["u4"],
            "parent_union": "u3",
            "name": "item03",
            "birthyear": 1930,
            "deathyear": 2010,
        },
    },
    "unions": {
        "u1": {
            "id": "u1",
            "partner": ["id1"],
            "children": ["id2"]
        },
        "u2": {
            "id": "u2",
            "partner": ["id2"],
            "children": ["id3"]
        },
        "u3": {
            "id": "u3",
            "partner": ["id3"],
            "children": ["id4", "id5"]
        },
        "u4": {
            "id": "u4",
            "partner": ["id4", "id5"],
            "children": ["id6"]
        },
    },
    "links": [
        ["id1", "u1"],
        ["u1", "id2"],
        ["id2", "u2"],
        ["u2", "id3"],
        ["id3", "u3"],
        ["u3", "id4"],
        ["u3", "id5"],
        ["id4", "u4"],
        ["id5", "u4"],
        ["u4", "id6"],
    ]
};

Can you confirm that the error persists if you clone the latest version of js_family_tree and overwrite the data.js with this one?

BenPortner commented 2 years ago

Closed due to inactivity. Feel free to re-open if problems persist!