How to implement hyperlinks in JSON & D3 plugin?-CodePudding

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>

CodePudding user response：

Chain this method before .initialize():

.on("nodeClick", function(event, index, arr) {
  if (!event.data.children.length) {
    console.log('you clicked a child-less item', event.data);
  }
})

Inside the condition, event.data is the clicked childless item. Feel free to place URLs inside those objects and use those URLs to navigate away.

Taken from the repo's /examples folder, where I found one named Advanced example with Node Click Event.

According to the comment on the same page, you can also achieve this using the options syntax:

/* const tree = [
  place your data here...
]; // */
new d3.mitchTree.boxedTree({
  events: {
    nodeClick({ data }) {
      if (!data.children.length) {
        console.log('You clicked a childless item', data);
      }
    }
  }
})
.setData(tree)
// ...rest of chain
.initialize();