d3.js(v5.7)力导向图(关系图谱)
先上图,后面再一一解释:
ok,为了方便理解,这里我就没有用之前封装的automatch函数来将数据和节点匹配了,如果你对enter(),exit()函数还不是很理解的话,请移步至我之前写的《node与数据匹配》(automatch函数)
那么接下来:
一、声明全局变量
因为力导向图,涉及到众多节点的运动,并且在写的时候都是以callback的形式去操作这些节点,所以这里我们将这些节点声明为全局变量(应该也是可以直接声明在组件的data里面的,如果你有兴趣,不妨一试)
这些注释应该都详细了吧。
二、开始布局画布
不难看出,在900x500的svg画布上,添加了一个g标签作为绘图的起点(60,60),并新建一个力导向图
三、处理节点数据、关系数据
四、数据处理好之后,开始绘图
①线和线上文字
②节点和节点面描述(他两是一组)
因为是一组,所以他两外面要用g标签包裹,就和之前绘完整柱形图时一样
五、辅助函数
主函数中用到了4个辅助函数,其中一个用于初始化线的位置和线上文本位置以及节点分组的位置;
其他三个则用于控制节点分组拖拽时候的自己以及其他节点的位置:
六、官方相关API截图
d3.js(v5.7)力导向图(关系图谱)的更多相关文章
- D3.js力导向图中新增节点及新增关系连线示例
大家在使用D3.js中的力导向图时,基本都会遇到动态增加节点及连线的需求,这里记录一下我的实现方式. 话不多说,先放代码: <!DOCTYPE html> <html lang=&q ...
- D3.js力导向图(适用于其他类型图)中后添加元素遮盖已有元素的问题解决
上一篇说了在D3.js中动态增加节点及连线的一种实现方式,但是有后添加元素遮盖原节点的现象,这一篇说一下出现这个现象的解决办法. 在D3.js中后添加的元素是会遮盖先添加的元素的,同时还有一个设定:后 ...
- D3.js 力导向图的显示优化
D3.js 作为一个前端,说到可视化除了听过 D3.js 的大名,常见的可视化库还有 ECharts.Chart.js,这两个库功能也很强大,但是有一个共同特点是封装层次高,留给开发者可设计和控制的部 ...
- D3.js 力导向图
花了大半天看了一个八十几行的代码..心累 力导向图是之前就有画过很多次的东西,但是这次的代码看上去很陌生,然后发现是D3更新了4.0.... 先贴代码 var svg = d3.select(&quo ...
- D3.js 力导向图的制作
力导向图中每一个节点都受到力的作用而运动,这种是一种非常绚丽的图表. 力导向图(Force-Directed Graph),是绘图的一种算法.在二维或三维空间里配置节点,节点之间用线连接,称为连线. ...
- D3.js系列——布局:饼状图和力导向图
一.饼状图 在布局的应用中,最简单的就是饼状图. 1.数据 有如下数据,需要可视化: , , , , ]; 这样的值是不能直接绘图的.例如绘制饼状图的一个部分,需要知道一段弧的起始角度和终止角度,这些 ...
- Vue和d3.js(v4)力导向图force结合使用,v3版本升级v4【一】
前段时间因为参与项目涉密,所以一直没有更新博客,有些博友给我私信或者留言要部分博文的源码,因为我的电脑更换,demo的源码没有备份 所以无法提供.大家可针对具体问题问我,有空我定会回复的.另外转发文章 ...
- D3.js 力导向图的拖拽(drag)与缩放(zoom)
不知道大家会不会跟我一样遇到这样的问题,在之前做的力导向图的基础上加上缩放功能的时候,拖动节点时整体会平移不再是之前酷炫的效果(失去了拉扯的感觉!).天啊,简直不能接受如此丑X的效果.经过不懈的努力终 ...
- 力导向图Demo
<html> <head> <meta charset="utf-8"> <title>力导向图</title> < ...
随机推荐
- 20145302张薇 Java第一周学习总结
20145302张薇 <Java程序设计>第一周学习总结 教材学习内容总结 第一章 1995年,java被公认诞生.java第一开始为了消费性数字产品(如手机)而设计,所以java本身有很 ...
- C#开发自己的Web服务器
介绍 我们将学习如何写一个简单的web服务器,用于响应知名的HTTP请求(GET和POST),用C#发送响应.然后,我们从网络访问这台服务器,这次我们会说“Hello world!” 背景 HTTP协 ...
- [BZOJ1117]救火站gas
Description 给你一棵树,现在要建立一些消防站,有以下要求: 1. 消防站要建立在节点上,每个节点可能建立不只一个消防站. 2. 每个节点应该被一个消防站管理,这个消防站不一定建立在该节点上 ...
- PAT1072. Gas Station (30)
题目的测试用例数据有问题! 第一个Case 应该是 G1 2.0 3.2 一直在想3.3分母的3怎么来了.ORZ #include <iostream> #include <ccty ...
- 安装GoMap
参考:https://github.com/ehrudxo/GoMap 1.依赖go包安装 gorm包安装 直接在github首页搜索gorm,找到对应的gorm包: 然后打开本机cmd命令行窗口,切 ...
- quartz动态job工具类 serviceh注入问题
package com.heyi.yanglao.common.job.util; import cn.hutool.core.date.DateUtil; import lombok.extern. ...
- url传递数据类型
php中传递数据,get或post方式为啥用字符串传递,为什么不能直接用数组形式,用的话可以吗
- ElasticSearch介绍与安装
什么是ES? 1基于Apache Lucene构建的开源搜索引擎 2采用java编写,提供简单易用的RESTFul API 3轻松的横向扩展,可支持PB级的结构化或非结构化数据处理 ES的应用场景? ...
- CSS元素隐藏的11种方法
{ display: none; /* 不占据空间,无法点击 */ } { visibility: hidden; /* 占据空间,无法点击 */ } { position: absolute; cl ...
- javaScript tips —— z-index 对事件机制的影响
demo // DOM结构 class App extends React.Component { componentDidMount() { const div1 = document.getEle ...