如何在JSON与D3插件d3-mitch-tree中为无子节点添加超链接

实现逻辑说明 #

JSON本身支持自定义属性，你直接给需要跳转的无子节点加个存储跳转地址的自定义字段即可，再配合插件的节点点击事件做判断跳转就行，实现非常简单。

具体步骤 #

1. 调整JSON数据结构 #

给需要跳转的无子节点新增jumpUrl字段，存储你要跳转的目标地址，修改后的示例数据如下：

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": [],
                    "jumpUrl": "你要跳转的地址1" // 新增自定义跳转地址字段
                },
                {
                    "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": [],
                    "jumpUrl": "你要跳转的地址2" // 新增自定义跳转地址字段
                }
            ]
        }
    ]
};

2. 新增节点点击事件配置 #

在树插件的初始化配置中，添加setOnNodeClickHandler方法处理点击逻辑，同时可以加一段CSS让可点击的节点有手型提示，优化交互体验。

完整的页面代码如下：

<!-- 新增样式，让可点击的节点显示手型 -->
<style>
.mitch-tree-node{
    cursor: pointer;
}
</style>

<div id="visualisation"></div>

<script src="https://cdn.jsdelivr.net/gh/deltoss/d3-mitch-tree@1.0.2/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": [],
                    "jumpUrl": "你要跳转的地址1"
                },
                {
                    "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": [],
                    "jumpUrl": "你要跳转的地址2"
                }
            ]
        }
    ]
};

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;
})
// 新增点击事件处理逻辑
.setOnNodeClickHandler(function (event, data) {
    // 判断：当前节点无子节点 且 配置了跳转地址 则执行跳转
    if(data.children.length === 0 && data.jumpUrl){
        // 新窗口打开用下面这行
        window.open(data.jumpUrl, '_blank');
        // 当前页跳转用下面这行，二选一即可
        // window.location.href = data.jumpUrl;
    }
})
.initialize();          
</script>

可选优化 #

如果你不想所有无子节点都支持跳转，可以给需要跳转的节点再加个自定义字段比如enableJump: true，判断的时候加上这个条件即可，自定义字段可以根据你的需求灵活配置。

内容的提问来源于stack exchange，提问作者4DF