Family Tree – JavaScript | Professional Programmer2

Background
dtree
Let’s use it
1. Install dtree
2. index.html

Background

I need to make family tree to explain inheritance tax.

Actually, it’s fine to create slide and convert png.

But, we can create by HTML, it’s easy to change.

dtree

I found dtree – visualizing data tree based on d3.

License is MIT, so not care a lot.

There are a lot of data visualization library, but it’s simple not paid version.

Let’s use it

Before completing my purpose (to explain inheritance tax),

I just copy sample codes (only code part) and arrange (remove some childs)

From, github documentation. This library requires d3, lodash

Install dtree

I use npm

npm install d3-dtree

All dependencies are installed automatically.

O.K. Let’s write the codes.

index.html

In this time, I just create simple HTML (index.html) I imported dependency javascripts directly.

<!DOCTYPE html>
<html lang="jp">
<head>
    <meta charset="UTF-8">
    <title>D3Dtree</title>
    <script src="../node_modules/lodash/lodash.js"></script>
    <script src="../node_modules/d3/build/d3.min.js"></script>
    <script src="../node_modules/d3-dtree/dist/dTree.min.js"></script>
    <style>
        .linage {
            fill: none;
            stroke: #000;
        }
        .marriage {
            fill: none;
            stroke: black;
        }
        .man {
            background-color: lightblue;
            border-style: solid;
            border-width: 1px;
            box-sizing: border-box;
        }
        .woman {
            background-color: pink;
            border-style: solid;
            border-width: 1px;
            box-sizing: border-box;
        }
        .emphasis{
            font-style: italic;
        }
        p {
            padding:0;
            margin:0;
            font-size: 10px;
        }
        svg {
            border-style: solid;
            border-width: 1px;
        }
    </style>
</head>
<body>
<div id="graph"></div>
<script>
    treeData = [{
        "name": "Niclas Superlongsurname",
        "class": "man",
        "textClass": "emphasis",
        "marriages": [{
            "spouse": {
                "name": "Iliana",
                "class": "woman",
                "extra": {
                    "nickname": "Illi"
                }
            },
            "children": [{
                "name": "James",
                "class": "man",
                "marriages": [{
                    "spouse": {
                        "name": "Alexandra",
                        "class": "woman"
                    },
                    "children": [{
                        "name": "Eric",
                        "class": "man",
                        "marriages": [{
                            "spouse": {
                                "name": "Eva",
                                "class": "woman"
                            }
                        }]
                    }, {
                        "name": "Jane",
                        "class": "woman"
                    }, {
                        "name": "Jasper",
                        "class": "man"
                    }]
                }]
            }]
        }]
    }]

    dTree.init(treeData, {
        target: "#graph",
        debug: true,
        height: 200,
        width: 800,
        callbacks: {
            nodeClick: function(name, extra) {
                console.log(name);
            },
            textRenderer: function(name, extra, textClass) {
                // THis callback is optinal but can be used to customize
                // how the text is rendered without having to rewrite the entire node
                // from screatch.
                if (extra &amp;&amp; extra.nickname)
                    name = name + " (" + extra.nickname + ")";
                return "<p align='center' class='" + textClass + "'>" + name + "</p>";
            },
            nodeRenderer: function(name, x, y, height, width, extra, id, nodeClass, textClass, textRenderer) {
                // This callback is optional but can be used to customize the
                // node element using HTML.
                let node = '';
                node += '<div ';
                node += 'style="height:100%;width:100%;" ';
                node += 'class="' + nodeClass + '" ';
                node += 'id="node' + id + '">\n';
                node += textRenderer(name, extra, textClass);
                node += '</div>';
                return node;
            }
        }
    });
</script>
</body>
</html>

O.K. That’s it.

We need following javascript (get from local node npm)

<script src="../node_modules/lodash/lodash.js"></script>
<script src="../node_modules/d3/build/d3.min.js"></script>
<script src="../node_modules/d3-dtree/dist/dTree.min.js"></script>

Need to import above 3 javascripts.

The result is

dtree init is preparing data and configuration. #graph is id attr in div. I put <div id=”graph”>

on the top of body.

Also, style tag is arrange for this family tree. This css is from Demo.