先上图,后面再一一解释:

ok,为了方便理解,这里我就没有用之前封装的automatch函数来将数据和节点匹配了,如果你对enter(),exit()函数还不是很理解的话,请移步至我之前写的《node与数据匹配》(automatch函数)

那么接下来:

一、声明全局变量

因为力导向图,涉及到众多节点的运动,并且在写的时候都是以callback的形式去操作这些节点,所以这里我们将这些节点声明为全局变量(应该也是可以直接声明在组件的data里面的,如果你有兴趣,不妨一试)

这些注释应该都详细了吧。

二、开始布局画布

不难看出,在900x500的svg画布上,添加了一个g标签作为绘图的起点(60,60),并新建一个力导向图

三、处理节点数据、关系数据

四、数据处理好之后,开始绘图

①线和线上文字

②节点和节点面描述(他两是一组)

因为是一组,所以他两外面要用g标签包裹,就和之前绘完整柱形图时一样

五、辅助函数

主函数中用到了4个辅助函数,其中一个用于初始化线的位置和线上文本位置以及节点分组的位置;

其他三个则用于控制节点分组拖拽时候的自己以及其他节点的位置:

六、官方相关API截图

d3.js(v5.7)力导向图(关系图谱)的更多相关文章

  1. D3.js力导向图中新增节点及新增关系连线示例

    大家在使用D3.js中的力导向图时,基本都会遇到动态增加节点及连线的需求,这里记录一下我的实现方式. 话不多说,先放代码: <!DOCTYPE html> <html lang=&q ...

  2. D3.js力导向图(适用于其他类型图)中后添加元素遮盖已有元素的问题解决

    上一篇说了在D3.js中动态增加节点及连线的一种实现方式,但是有后添加元素遮盖原节点的现象,这一篇说一下出现这个现象的解决办法. 在D3.js中后添加的元素是会遮盖先添加的元素的,同时还有一个设定:后 ...

  3. D3.js 力导向图的显示优化

    D3.js 作为一个前端,说到可视化除了听过 D3.js 的大名,常见的可视化库还有 ECharts.Chart.js,这两个库功能也很强大,但是有一个共同特点是封装层次高,留给开发者可设计和控制的部 ...

  4. D3.js 力导向图

    花了大半天看了一个八十几行的代码..心累 力导向图是之前就有画过很多次的东西,但是这次的代码看上去很陌生,然后发现是D3更新了4.0.... 先贴代码 var svg = d3.select(&quo ...

  5. D3.js 力导向图的制作

    力导向图中每一个节点都受到力的作用而运动,这种是一种非常绚丽的图表. 力导向图(Force-Directed Graph),是绘图的一种算法.在二维或三维空间里配置节点,节点之间用线连接,称为连线. ...

  6. D3.js系列——布局:饼状图和力导向图

    一.饼状图 在布局的应用中,最简单的就是饼状图. 1.数据 有如下数据,需要可视化: , , , , ]; 这样的值是不能直接绘图的.例如绘制饼状图的一个部分,需要知道一段弧的起始角度和终止角度,这些 ...

  7. Vue和d3.js(v4)力导向图force结合使用,v3版本升级v4【一】

    前段时间因为参与项目涉密,所以一直没有更新博客,有些博友给我私信或者留言要部分博文的源码,因为我的电脑更换,demo的源码没有备份 所以无法提供.大家可针对具体问题问我,有空我定会回复的.另外转发文章 ...

  8. D3.js 力导向图的拖拽(drag)与缩放(zoom)

    不知道大家会不会跟我一样遇到这样的问题,在之前做的力导向图的基础上加上缩放功能的时候,拖动节点时整体会平移不再是之前酷炫的效果(失去了拉扯的感觉!).天啊,简直不能接受如此丑X的效果.经过不懈的努力终 ...

  9. 力导向图Demo

    <html> <head> <meta charset="utf-8"> <title>力导向图</title> < ...

随机推荐

  1. 20145302张薇 Java第一周学习总结

    20145302张薇 <Java程序设计>第一周学习总结 教材学习内容总结 第一章 1995年,java被公认诞生.java第一开始为了消费性数字产品(如手机)而设计,所以java本身有很 ...

  2. C#开发自己的Web服务器

    介绍 我们将学习如何写一个简单的web服务器,用于响应知名的HTTP请求(GET和POST),用C#发送响应.然后,我们从网络访问这台服务器,这次我们会说“Hello world!” 背景 HTTP协 ...

  3. [BZOJ1117]救火站gas

    Description 给你一棵树,现在要建立一些消防站,有以下要求: 1. 消防站要建立在节点上,每个节点可能建立不只一个消防站. 2. 每个节点应该被一个消防站管理,这个消防站不一定建立在该节点上 ...

  4. PAT1072. Gas Station (30)

    题目的测试用例数据有问题! 第一个Case 应该是 G1 2.0 3.2 一直在想3.3分母的3怎么来了.ORZ #include <iostream> #include <ccty ...

  5. 安装GoMap

    参考:https://github.com/ehrudxo/GoMap 1.依赖go包安装 gorm包安装 直接在github首页搜索gorm,找到对应的gorm包: 然后打开本机cmd命令行窗口,切 ...

  6. quartz动态job工具类 serviceh注入问题

    package com.heyi.yanglao.common.job.util; import cn.hutool.core.date.DateUtil; import lombok.extern. ...

  7. url传递数据类型

    php中传递数据,get或post方式为啥用字符串传递,为什么不能直接用数组形式,用的话可以吗

  8. ElasticSearch介绍与安装

    什么是ES? 1基于Apache Lucene构建的开源搜索引擎 2采用java编写,提供简单易用的RESTFul API 3轻松的横向扩展,可支持PB级的结构化或非结构化数据处理 ES的应用场景? ...

  9. CSS元素隐藏的11种方法

    { display: none; /* 不占据空间,无法点击 */ } { visibility: hidden; /* 占据空间,无法点击 */ } { position: absolute; cl ...

  10. javaScript tips —— z-index 对事件机制的影响

    demo // DOM结构 class App extends React.Component { componentDidMount() { const div1 = document.getEle ...