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> < ...
随机推荐
- Could not initialize class sun.awt.X11FontManager 异常问题
查了很多资料都是建议在 catalina.sh 中增加 -Djava.awt.headless=true \ 的配置. 加了没有效果. 后来发现是因为JDK版本问题,将JDK 8换成 JDK 7后 ...
- RocEDU.阅读.写作《苏菲的世界》书摘(五)
在谈到如何获取确实的知识时,当时许多人持一种全然怀疑的论调,认为人应该接受自己一无所知事实.但笛卡尔却不愿如此.他如果接受这个事实,那他就不是一个真正的哲学家了.他的态度就像当年苏格拉底不肯接受诡辩学 ...
- Could not reserve enough space for 1572864KB object heap
This problem might be caused by incorrect configuration of the daemon.For example, an unrecognized j ...
- SpringBoot 集成Netty实现UDP Server
注:ApplicationRunner 接口是在容器启动成功后的最后一步回调(类似开机自启动). UDPServer package com.vmware.vCenterEvent.netty; im ...
- 解决java.lang.IllegalArgumentException: Can't load standard profile: LINEAR_RGB.pf
调用org.apache.batik.transcoder.Transcoder转换图片时,报了以下错误:java.lang.IllegalArgumentException: Can't load ...
- 洛谷 P2015 二叉苹果树(codevs5565) 树形dp入门
dp这一方面的题我都不是很会,所以来练(xue)习(xi),大概把这题弄懂了. 树形dp就是在原本线性上dp改成了在 '树' 这个数据结构上dp. 一般来说,树形dp利用dfs在回溯时进行更新,使用儿 ...
- Spring MVC web.xml+servlet.xml
<!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" " ...
- [异常记录(三)] 从 bcp 客户端收到一个对 colid 12 无效的列长度
这个问题是使用SqlBulkCopy拷贝数据,字符串长度超出数据类型长度导致的. 处理过程中对长度进行判断并截取就OK了. *注:SqlBulkCopy 这货 要求ColumnMappings 列的大 ...
- 01_Storm体系概要
1. Storm发展历史 Storm历史 1. 2010年12月,backtype公司Nathan,提出Storm的核心概念2. backtype, 提供数据分析,数据处理服务的一个公司3. 2011 ...
- Lucene 更新、删除、分页操作以及IndexWriter优化
更新操作如下: 注意:通过lukeall-1.0.0.jar 查看软件,我们可以看到,更新其实是先删除在插入, 前面我们知道索引库中有两部分的内容组成,一个是索引文件,另一个是目录文件, 目前我们更新 ...