项目需要画一个类似知识图谱的节点关系图. 一开始用的是echart画的. 根据https://gallery.echartsjs.com/editor.html?c=xH1Rkt3hkb,成功画出简单的节点关系. 如图: 总结—— [优点]:关系一目了然,可以鼠标悬浮查看相邻节点,其他节点淡化. [缺点]:拖动结果不理想,尤其是数据过多时,一旦拖动一个,整个页面所有的节点都在动,很久都无法停止(可能是我配置方法不对,但是后续没找到解决方法) 于是转而使用d3力导图. 除了基本的节点展示和拖动之外

需求:用户在地图上单击选点,页面获取到具体坐标并返回. 首先比较重要的是Vue中的$nextTick,因为vue是异步更新的,如果是想打开Dialog或者是其他操作dom后才加载地图,使用nextTick可以保证在dom加载之后进行加载. this.$nextTick(() => { this.loadMap(); }) 如果直接加载地图,这时dom还没有全部更新完毕,无法加载. 接下来是初始化容器与加载地图(这里不仅仅是地图,也可以加载其他svg) 此部分为d3.js的应用,绘制矢量图,选定容

这是一种用于描述节点之间联系的图表. 1. 弦图是什么 弦图(Chord),主要用于表示两个节点之间的联系. 两点之间的连线,表示谁和谁具有联系: 线的粗细表示权重: 2. 数据 初始数据为: var city_name = [ "北京" , "上海" , "广州" , "深圳" , "香港" ]; var population = [ [ 1000, 3045 , 4567 , 1234 , 3714 ]

项目中有用到d3.js用于图结构的查询, 需求如下: 右上角有个模糊搜索功能,查询出来的结果用列表展示 点击列表的某一列,要求画布移动到当前选中的节点的位置,基于画布正中间 搜索出来的结果列表展示用的element-ui表格,前台进行分页,不依赖后台,下面记录一下svg的平移 function translateSvg(d){ //获取svg的父元素 const parentBox = svg.node().parentElement //获取父元素的宽度 const fullWidth = p

Welcome to the Neo4j wiki! 初衷这是一个知识图谱构建工具,最开始是对产品和领导为了做ppt临时要求配合做图谱展示的不厌其烦,做着做着就抽出一个目前看着还算通用的小工具 技术栈小工具是前台是基于vue + d3.js ,后台是springboot配合Neo4j. 开发工具eclipse ,idea也能成功运行和发布 源码https://github.com/MiracleTanC/Neo4j 演示demo地址:http://kg.miaoleyan.com/. 实现的基本

前言 本文灵感来源于Mike Bostock 的一个 demo 页面 原 demo 基于 D3.js v3 开发, 笔者将其使用 D3.js v5 进行重写, 并改为使用 ES6 语法. 源码: github 在线演示 : demo 效果 可以看到, 上图左上角为图例, 中间为各个手机公司之间的专利关系图. 图例中有三种线段: 红色实线: 正在进行专利诉讼 (箭头指向方为被诉讼方) 蓝色虚线: 诉讼已经结束 绿色实线: 专利已经授权 实现 下面让我们看看如何一步步实现上图的效果. 分析数据 [

先看下 效果 某个用户,邀请了自己的朋友 ,自己的朋友邀请了其他朋友,1 展示邀请关系,2 点击头像显示邀请人和被邀请人的关系.(网上这种资料很少, 另外很多都是从JSON文件取 数据, 这里是从数据库取数据) =================================================================================================需求:Java从数据库查用户表,管理平台可以实时查看每个月用户的邀请关系图. 以下是代码: 1

机械图(力路线图)结合老百姓的关系图中的生活,这是更有趣. 本文将以此为证据,所列的如何图插入外部的图像和文字的力学. 在[第 9.2 章]中制作了一个最简单的力学图.其后有非常多朋友有疑问,基本的问题包含: 怎样在小球旁插入文字 怎样将小球换为别的图形 怎样插入图片 怎样限制小球运动的边界 本文将对以上问题依次做出讲解.当中前三点是 SVG 元素的问题.和 D3 无多大关联. 1. SVG 图片 SVG 的图片元素的具体讲解可看[官方文档-图片].通常,我们仅仅须要使用到图片元素的五个属性就够

大家在使用D3.js中的力导向图时,基本都会遇到动态增加节点及连线的需求,这里记录一下我的实现方式. 话不多说,先放代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://d3js.org/d3.v4.min.js&qu

前段时间因为参与项目涉密,所以一直没有更新博客,有些博友给我私信或者留言要部分博文的源码,因为我的电脑更换,demo的源码没有备份 所以无法提供.大家可针对具体问题问我,有空我定会回复的.另外转发文章请说明出处,谢谢关注! 之前有多篇博文介绍了d3力导向图的绘制过程的一些问题,现在由于性能和UI的要求,要升级d3版本.因为v3版本现在使用的不多了,网上可找的资料不多且拓展性不好,因此花了点时间做了版本升级. 效果展示 初始化布局 this.force = d3.forceSimulation(n

前端实现数据可视化的方案有很多种,以前都是使用百度的echarts,使用起来很方便,直接按照特定的数据格式输入,就能实现相应的效果,虽然使用方便,但是缺点就是无法自定义一些事件操作,可自由发挥的功能很少,对于一些特殊要求的需求就无能为力了,而d3.js很好地解决了这个问题: 1.安装d3 npm install d3 --save 2.安装d3-sankey npm install d3-sankey --save 3.引入对应的模块 import * as d3 from 'd3' impor

思维导图的节点具有层级关系和隶属关系,很像枝叶从树干伸展开来的形状.在前面讲解布局的时候,提到有五个布局是由层级布局扩展来的,其中的树状图(tree layout)和集群图(cluster layout)布局制作出来的图具有"树形".因此,可以凭借这两种布局来制作思维导图. 1. 构造思路 树状图布局,将一个具有层级关系的对象root转换成节点数组nodes时,情况如下.有一个root对象: { name: "node1", children: [ { name:

捆图(Bundle)是 D3 中比较奇特的一个布局,只有两个函数,而且需要与其它布局配合使用.本文讲述捆图的制作方法. 有关捆图的例子极少,很容易找到的是:http://bl.ocks.org/mbostock/1044242 但是此例有些复杂,不太容易弄懂,而且也没有相应的说明文字(D3官网上的例大多没有相应文字解说),根本无法作为参考.本文提供一个简单的例子,讲解捆图到底是什么,应该怎么做. 捆图只有两个函数: d3.layout.bundle():创建一个捆图布局. bundle(link

本章讨论在力学图中经常使用到的事件( Event ),然后对[p=555">进阶 - 第 2.0 章]的人物关系图进行改进.使用户可以固定拖拽的对象. 在[入门 - 第 9.2 章]和[进阶 - 第 2.0 章]中,都用到了下面代码: force.on("tick", function(){ }); 这里的 force 是之前代码中定义的布局( Layout ).tick 表示当运动进行中每更新一帧时. 这是力学图中最常使用的事件,用于设定力学图每一帧是怎样更新的.除此

前面的文章已经介绍了cytoscape.js . d3.js的安装及简单demo,现在展示从html页面转移到vue项目下的最初版的demo 效果图: 代码如下: <template> <div style="width: 100%;height: 100%;"> <div id="MainCy" style="width: 100%;height: 100%;"></div> <div id

之前写一个 Demo里面 有些东西要使用d3实现一些效果 但是在很多论坛找资源都找不到可以在Vue里面使用D3.js的方法,npm 上面的D3相对来说 可以说是很不人性化了 完全没有说 在webpack上怎么使用D3.js 最后折腾很久 看到某位外国大佬 看他的案例 成功的实现了在Vue项目里面实现D3的使用 首先安装 npm install d3 --save-dev 以防万一,然后看package.json 安装完成 在我们开始之前,让我们渲染一个Vue组件,它使用常规的D3 DOM操作呈现

此文章为原创文章,原文地址:https://www.cnblogs.com/eagle1098/p/11431679.html 连线动画图 编辑器 效果如上图所示.本项目使用主要d3.jsv4制作,分两部分,一个是实际展示的连线动画图,另一个是管理人员使用鼠标编辑连线的页面.对于d3.js如何引入图片,如何画线等基础功能,这里就不再介绍了,大家可以找一些入门文章看一下.这里主要介绍一下重点问题. 1.连线动画图 此图的主要功能是每隔给定时间,通过ajax请求后台数据,并根据返回的数据动态改变每个

思维导图的节点具有层级关系和隶属关系,很像枝叶从树干伸展开来的形状.在前面讲解布局的时候,提到有五个布局是由层级布局扩展来的,其中的树状图(tree layout)和集群图(cluster layout)布局制作出来的图具有“树形”.因此,可以凭借这两种布局来制作思维导图. 1. 构造思路 树状图布局,将一个具有层级关系的对象root转换成节点数组nodes时,情况如下.有一个root对象: { name: "node1", children: [ { name: "node

做项目遇到一个需求,将具有层级关系的词语用树状图的形式展示它们之间的关系,像这样: 或者是这样: 上面的图片只是样例,跟我下面的代码里面用的数据不同 网上有很多这种数据可视化展示的js控件,我这里选择了D3.js. 首先在html页面需要包含D3的js文件,其次我们需要将数据构造成json格式,然后存入到一个d3.json文件 { "name":"如何学习D3", "children": [ { "name":"预备

上一篇说了在D3.js中动态增加节点及连线的一种实现方式,但是有后添加元素遮盖原节点的现象,这一篇说一下出现这个现象的解决办法. 在D3.js中后添加的元素是会遮盖先添加的元素的,同时还有一个设定:后添加的Group2及Group2内的其他元素会遮盖先添加的Group1及Group1中的其他元素. 举个栗子 别人都在过520,我在这里玩栗子 =.=: 向SVG中添加了一个Group1,又添加了一个Group2: 先向Group2中添加一个节点Group2_Node,在向Group1中添加一个节点

D3.js 作为一个前端,说到可视化除了听过 D3.js 的大名,常见的可视化库还有 ECharts.Chart.js,这两个库功能也很强大,但是有一个共同特点是封装层次高,留给开发者可设计和控制的部分太少.和 EChart.Chart.js 等相比,D3.js** 的相对来说自由度会高很多,得益于 D3.js **中的 SVG 画图对事件处理器的支持,D3.js 可将任意数据绑定到文档对象模型(DOM)上,也可以直接操作对象模型(DOM)完成 W3C DOM API 相关操作,对于想要展示自己