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项目中的使用及可能遇到的问题

d3 - 力引导图(三) 绑定事件相关推荐

d3 - 力引导图(二) 为节点设置多种唯一颜色方案
v3版本: var color = d3.scale.category10(); ... return color[i]; v4/v5版本: d3.schemeCategory10 d3.scheme ...
d3 - 建立力引导图将知识图谱可视化 (一)
本文要实现的功能与这个网页比较类似: KGBuilder知识图谱可视化使用到的插件为: d3 没有采用echarts等实现的原因是: echarts比较死板, 有些需求不能实现, 而d3可以灵活的制 ...
d3关联关系图力引导图，支持多条线，带箭头。
代码链接:https://download.csdn.net/download/qq_42080160/11453702最实用d3关联关系力引导图,只需要引用一个js,向页面传一个josn串:写了非常 ...
数据可视化—D3力导向图—如何实现结点与其连线的交互
文章目录前言 1.编写目的 2.编码工具一.如何实现 1. 结点交互连线变粗 2. 文本自动换行 3. 背景图片设置透明度二.实现效果三.完整代码 1.用到的数据: 2.实现代码: 总结前言 ...
D3力导图绘制-基于line/path（v3、v7）
结果展示 d3的版本之间很不一样,一定要对应上自己是v3 or v5 or v7 数据来源:开源开放|新冠知识图谱开放数据集第二批_病毒 v3版本:有简单的交互,可以拖拽,鼠标放上去能显示简介 v7版 ...
力引导图python实现 force directed layout
force directed layout 力引导图python实现实验内容: force directed layout编程实现探讨三个force directed layout算法的加速策略 ...
d3 力导向图 force graph
背景:项目 vue.js + d3 v4 力导向图可以直观看出各个元素之间的相互作用力数据: {nodes:[{id:xxx, group: xx},{},...] // nodes 是每个节点 g ...
d3力导向图增加节点_d3.js力导向图节点如何都显示在边框内
最近用到d3.js中的force力导向图,想实现效果如下,所有城市节点都在可视范围内,如果超出有滚动条也可以. 遇到的问题是,当节点一多,有的节点就会跑到外面去,这边是通过加大charge相互作用力, ...
d3力导向图增加节点_D3.js+Es6+webpack构建人物关系图(力导向图)，动态更新数据，点击增加节点，拖拽增加连线......
Java学习手记2--多线程一.线程的概念 CPU执行程序,就好比一个人在干事情一样,同一个时间你只能做一件事情,但是这样的效率实在是太低了,在你用电脑的时候,听歌就不能浏览网页,看电影就不能下载视 ...

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

介绍

样例

d3 - 力引导图(三) 绑定事件相关推荐

最新文章

热门文章