d3.event is undefined (simple hello world example)

R-obert commented 3 years ago

Hi,

I wanted to check out this software and I fail at a simple hello world example. My test folder looks like this:

Screenshot from 2020-10-22 19-50-07

So basically I have just dumped everything into a folder: the needed libraries (1 folder for font-awesome, 1 folder for d3 and the jquery file), the pedigreejs folder, and my 2 custom files pedigree_helloworld.html and pedigree_helloworld.js. According to the docs that's all I need.

Content of pedigreejs_helloworld.html:

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8">

        <script src="jquery-3.5.1.min.js"></script>
        <script src="d3/d3.min.js"></script>
        <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">

        <link rel="stylesheet" href="pedigreejs-0.2/dist/css/pedigreejs.min.css">
        <script src="pedigreejs-0.2/dist/js/pedigreejs.min.js"></script>

        <script src="pedigree_helloworld.js"></script>
    </head>

    <body>
        <div id="ped_buttons"></div>
        <div id="ped_target"></div>
    </body>

</html>

Content of pedigreejs_helloworld.js:


$(document).ready(function(){
    var dataset = [ {"name": "m21", "sex": "M", "top_level": true}, {"name": "f21", "sex": "F", "top_level": true}, {"name": "ch1", "sex": "F", "mother": "f21", "father": "m21", "diabetes":  true, "proband": true}]

    var opts = {
    "targetDiv": "ped_target",
    "btn_target": "ped_buttons",
    "store_type": "array",
    "width": 1098,
    "height": 500,
    "symbol_size": 35,
    "edit": true,
    "diseases": [
        {
            "type": "diabetes",
            "colour": "#F68F35"
        }
    ],
    "DEBUG": false
    };
    var local_dataset = pedcache.current(opts);
    if (local_dataset !== undefined && local_dataset !== null) {
        opts.dataset = local_dataset;
    } else {
        opts.dataset = dataset;
    }
    opts= ptree.build(opts);
});

So basically I have just copied the dataset that I found on the website and tried to build a simple tree from it. Now, when I open the HTML in my browser, I see this:

Screenshot from 2020-10-22 19-49-19

Initially there are no errors in the console (i.e. after hitting F5). Then, as soon I move the mouse towards one of the nodes of the tree, the error messages appear in the console. The control buttons near the node just don't appear.

tcarver commented 3 years ago

Hi @R-obert what version of D3 are you using? It doesn't currently support v6. Try v5.16.0.

R-obert commented 3 years ago

... so simple :-) Thank you for the quick help!

Edit stumbled upon the next problem: clicking on the little "settings" icon of a person doesn't open the profile (nothing happens, no error in console either). I have already noticed that you are linking jquery-ui in your examples (which is not mentioned here), so I downloaded it and linked it as well. But still no effect when clicking on settings. Is this again version-related? I have downloaded all libraries today, so they are recent versions - except for D3 of course.

R-obert commented 3 years ago

Okay I found out why: there is a necessary div with the id "node_properties". Without it the settings-button will have no effect in the GUI. Can you add that information (and mention jquery-ui) here? Unless I have overlooked something those 2 bits are missing from the docs.

tcarver commented 3 years ago

@R-obert thanks. I have updated the docs as requested. Also please note there is a new release - v0.4.

CCGE-BOADICEA / pedigreejs

d3.event is undefined (simple hello world example) #117