d3 - 力引导图(三) 绑定事件

d3样例库

介绍

.on("event",function)；

d3通过 on() 绑定时间, 它有两个参数:

• 第一个参数是事件类型
• 第二个参数是执行的内容

事件类型可以参考 MDN: MDN事件类型

样例

节点信息:

        const data = {
            "nodes": [{
                "entity_name": "林黛玉",
                "entity_id": "entity/2870013",
                "ontology_name": "人员",
                "relation_num": 4
            }, {
                "entity_name": "贾宝玉",
                "entity_id": "entity/2870127",
                "ontology_name": "人员",
                "relation_num": 2
            },
            {
                "entity_name": "林如海",
                "entity_id": "entity/2870147",
                "ontology_name": "人员",
                "relation_num": 2
            },
            {
                "entity_name": "桃花行",
                "entity_id": "entity/3770056",
                "ontology_name": "作品",
                "relation_num": 2
            }],
            "links": [{
                "from": "entity/2870013",
                "to": "entity/2870127",
                "relation_id": "relation/815478",
                "relation_name": "表哥"
            },
            {
                "from": "entity/2870013",
                "to": "entity/2870147",
                "relation_id": "relation/815532",
                "relation_name": "父亲"
            },
            {
                "from": "entity/2870013",
                "to": "entity/3770056",
                "relation_id": "relation/815565",
                "relation_name": "创作"
            }]
        }

在绘制节点的时候添加单击事件:

在vue中绑定事件可能会遇到问题, 可以参考我的另一篇文章:
d3 -力引导图(四) vue项目中的使用及可能遇到的问题