How to implement hyperlinks in JSON & D3 plugin?


My goal here is to have the childless nodes contain hyperlinks. This is the D3 plugin I’m basing things off of: https://github.com/deltoss/d3-mitch-tree
Image Example

I’m newer to JS and JSON so I’m having difficulties on figuring out how to proceed, especially since there’s little to refer to in regard to hyperlinks & JSON. If there’s a better way to go about this, I’m certainly open to new ideas.

Thank you in advance

<script src="https://cdn.jsdelivr.net/gh/deltoss/[email protected]/dist/js/d3-mitch-tree.min.js"></script>
    <script>
        var data = {
            "id": 1,
            "name": "Animals",
            "type": "Root",
            "description": "A living that feeds on organic matter",
            "children": [
                {
                    "id": 6,
                    "name": "Herbivores",
                    "type": "Type",
                    "description": "Diet consists solely of plant matter",
                    "children": [
                        {
                            "id": 7,
                            "name": "Angus Cattle",
                            "type": "Organism",
                            "description": "Scottish breed of black cattle",
                            "children": []
                        },
                        {
                            "id": 8,
                            "name": "Barb Horse",
                            "type": "Organism",
                            "description": "A breed of Northern African horses with high stamina and hardiness. Their generally hot temperament makes it harder to tame.",
                            "children": []
                        }
                    ]
                }
            ]
        };

        var treePlugin = new d3.mitchTree.boxedTree()
        .setData(data)
        .setElement(document.getElementById("visualisation"))
        .setMinScale(0.5)
        .setAllowZoom(false)
        .setIdAccessor(function(data) {
                return data.id;
            })
            .setChildrenAccessor(function(data) {
                return data.children;
            })
            .setBodyDisplayTextAccessor(function(data) {
                return data.description;
            })
            .setTitleDisplayTextAccessor(function(data) {
                return data.name;
            })

                    
            .initialize();          

    </script>

Source: JavaSript – Stack Overflow

November 21, 2021
Category : News
Tags: D3.js | javascript | json

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.