D3Vueecharts个人乱记

利用d3+vue开发的一个网络拓扑图

https://copyfuture.com/blogs-details/20200710101052238h32wazjmcii49dr

一开始用的是echart画的。

根据https://gallery.echartsjs.com/editor.html?c=xH1Rkt3hkb,成功画出简单的节点关系。

如图: 

 

 

 

总结——

【优点】:关系一目了然,可以鼠标悬浮查看相邻节点,其他节点淡化。

【缺点】:拖动结果不理想,尤其是数据过多时,一旦拖动一个,整个页面所有的节点都在动,很久都无法停止(可能是我配置方法不对,但是后续没找到解决方法)

 


 

于是转而使用d3力导图。

 

 

 

 

  除了基本的节点展示和拖动之外,还可以双击新增节点,以及右击展示节点详情。

核心操作有以下:

1、绘制graph力

var simulation = d3
.forceSimulation(nodes)
.force(
'collide',
d3
.forceCollide()
.radius(() => 30)
.iterations(2)
)
.force(
'charge',
d3
.forceManyBody()
// .distanceMax(300)
.strength(-400)
)
.force(
'link',
d3
.forceLink(links)
.id(d => d.id)
.distance(100)
)
.force('center', d3.forceCenter(this.width / 2, this.height / 2))
// .force('x', d3.forceX(this.width / 2))
// .force('y', d3.forceY(this.height / 2))

2、绘制存放节点和关系的svg

var svgArea = d3
.select('.containers')
.append('svg')
.attr('viewBox', [0, 0, this.width, this.height])
.attr('class', 'd3Test')
.call(
d3.zoom().on('zoom', function() {
g.attr('transform', d3.event.transform)
})
)
.on('dblclick.zoom', () => {}) // 禁止双击放大

const g = this.svgArea.append('g').attr('class', 'content')

3、绘制节点关系

var links = g
.append('g')
.attr('class', 'links')
.selectAll('path')
.data(links, function(d) {
if (typeof d.source === 'object') {
return d.source.name + '_' + d.relationship + '_' + d.target.name
} else {
return d.source + '_' + d.relationship + '_' + d.target
}
})
.join('path')
.attr('stroke-width', d => Math.sqrt(d.value))
.attr('class', 'link')
.attr('id', function(d) {
if (typeof d.source === 'object') {
return d.source.name + '_' + d.relationship + '_' + d.target.name
} else {
return d.source + '_' + d.relationship + '_' + d.target
}
})

4、绘制节点

var nodes = g
.append('g')
.attr('class', 'nodes')
.selectAll('circle')
.data(nodes, d => d.name)
.join('circle')
.attr('r', d => (d.number ? d.number : 20))
.attr('class', 'node')
.attr('stroke', '#fff')
.attr('stroke-width', 1.5)
.attr('fill', this.color)
.on('dblclick', this.dbclickNode)//双击节点事件
.on('click', this.clickNode)//单击节点触发事件
// .on('mouseover', this.mouseoverNode)
// .on('mouseout', this.mouseoutNode)
.call(this.drag(this.simulation))

nodes.append('title').text(d => d.name)

5、然后还有个让节点缓慢停止下来的tick

 this.simulation.on('tick', () => {
this.links.attr('d', function(d) {
if (d.source.x < d.target.x) {
return (
'M ' +
d.source.x +
' ' +
d.source.y +
' L ' +
d.target.x +
' ' +
d.target.y
)
} else {
return (
'M ' +
d.target.x +
' ' +
d.target.y +
' L ' +
d.source.x +
' ' +
d.source.y
)
}
})
this.nodes
.attr('cx', function(d) {
if (d.fixed) {
d.fx = nodes[d.index].x
}
return d.x
})
.attr('cy', function(d) {
if (d.fixed) {
d.fy = nodes[d.index].y
}
return d.y
})
this.nodesName.attr('x', d => d.x).attr('y', d => d.y)
})

附上官网案例:https://observablehq.com/@d3/force-directed-graph

这个案例的版本好像比较老,个人建议用新版,不过新版的API有改动。

 

参考案例:https://eisman.github.io/neo4jd3/

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/247298.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vue中使用Vue-pdf在线预览

下载 npm i vue-pdf 引入(在所需要预览的页面) <script>import axios from axiosimport pdf from vue-pdfimport CMapReaderFactory from vue-pdf/src/CMapReaderFactory.js // 加载中文的包export default {components: {pdf},data () {return {numPages:&#xff0c;…

oracle 自定义 聚合函数

Oracle自定义聚合函数实现字符串连接的聚合 create or replace type string_sum_obj as object ( --聚合函数的实质就是一个对象 sum_string varchar2(4000), static function ODCIAggregateInitialize(v_self in out string_sum_obj) return number, --对象初始化 member func…

Vue3里的setup中使用vuex

useStore 这里我们可以直接从vuex 4.X中解构出useStore方法&#xff0c;就可以在setup中使用vuex的相关函数 template 使用$store <template><div><h2>{{ $store.state.count }}</h2><button click"increaseCount">点击</button…

JQ 取CHECKBOX选中项值

备忘录 $("[namecheckbox]:checked").each(function(){ alert((this).val()); }) ;转载于:https://www.cnblogs.com/showblog/archive/2010/09/13/1825099.html

vue3 echarts5 graph关系图谱 点击图例节点消失线不消失重复生成问题

const myChart ref(null);const myCharts ref(null);onMounted(() > {// 这种会导致线仍然存在 重复生成myCharts.value echarts.init(myChart.value);myCharts.value.setOption(option);});return {myChart,myCharts,}; 现象&#xff1a;如下图1 点击图例类目2&#xf…

非常完整的coco screator socketio

https://github.com/SeaPlanet/cocoscreator_chat 前端源码 https://github.com/socketio/socket.io-client https://cdnjs.com/libraries/socket.io 转载于:https://www.cnblogs.com/suneil/p/11288628.html

JavaScript 中 obj.hasOwnProperty(prop) 方法

语法 obj.hasOwnProperty(prop) 参数 prop 要检测的属性的 String 字符串形式表示的名称&#xff0c;或者 Symbol。 返回值 用来判断某个对象是否含有指定的属性的布尔值 Boolean。 描述 所有继承了 Object 的对象都会继承到 hasOwnProperty 方法。这个方法可以用来检测…

python面向对象初识

面向对象编程 1.面向对象初步了解 ​ 面向过程编程与函数编程对比&#xff1a; s1 ajdsgkaffddha count 0 for i in s1:count 1 print(f字符串的长度为{count}) # 面向过程编程每计算一次便使用一次for循环def my_len(s): # 计算数据类型长度的函数&#xff0c;可重复使用…

Vue3 VSCode新建项目报错The template root requires exactly one element.

1.首先我们点击左侧第四个图标插件2.输入框搜索vetur插件3.点击设置图标&#xff0c;再点击扩展设置4.搜素vetur>validation>template&#xff0c;取消vetur>validation>template的勾选 然后就不会报错了

计算机视觉概述

关于计算机视觉的介绍性文章&#xff0c;包括计算机视觉的定义&#xff0c;和人类视觉的区别以及涉及到的学科等等。 1. 什么是计算机视觉 计算机视觉既是工程领域&#xff0c;也是科学领域中的一个富有挑战性重要研究领域。计算机视觉是一门综合性的学科&#xff0c;它已经吸引…

Java生鲜电商平台-电商支付流程架构实战

Java生鲜电商平台-电商支付流程架构实战 说明&#xff1a;我一直秉承的就是接地气的业务架构实战。我的文章都有一个这样的核心。 1. 业务场景 2. 解决问题。 3.代码实现。 4.代码重构。 5.总结与复盘。 6.缺点与防范 一、场景描述 想必大家都曾遇到过这个问题&#xff0c;在电…

vue3.0 AntDesignVue2.0 table的rowkey报错问题解决方法

Warning: [antdv: Each record in table should have a unique key prop,or set rowKey to an unique primary key.] Warning: [antdv: Table] Each record in dataSource of table should have a unique key prop, or set rowKey of Table to an unique primary key 提示因为…

模式识别扫盲

模式识别是对表征事物或现象的各种形式的信息进行处理和分析&#xff0c;以对事物或现象进行描述、辨认、分类和解释的过程&#xff0c;是信息科学和人工智能的重要组成部分。英文“Pattern”源于法文“Patron”&#xff0c;本来是指可作为大家典范的理想的人&#xff0c;或用以…

vue2项目使用codemirror插件实现代码编辑器功能

1、使用npm安装依赖 npm install --save codemirror 2、在页面中放入如下代码 <template><textarea ref"mycode" class"codesql" v-model"code" style"height:200px;width:600px;"></textarea> </template>…

CentOS 6.5系统安装配置LAMP(Apache+PHP5+MySQL)服务器环境

安装篇&#xff1a; 一、安装Apache yum install httpd #根据提示&#xff0c;输入Y安装即可成功安装 /etc/init.d/httpd start#启动Apache 备注&#xff1a;Apache启动之后会提示错误&#xff1a; 正在启动 httpd:httpd: Could not reliably determine the servers fully qual…

前端有用的库

HTML awesome-html5 精选的HTML5资源精选清单 CSS tailwindcss 与Tailwind CSS相关的很棒的事情awesome-css-frameworks 很棒的CSS框架列表awesome-css-cn CSS 资源大全中文版&#xff0c;内容包括&#xff1a;CSS预处理器、框架、CSS结构、代码风格指南、命名习惯等等awesom…

计算机视觉牛人(转载)(最早在自动化所论坛上发现的)

paper毕竟是死的, 写paper的人才是活的. 那么我现在研究一下cv圈的格局, 按师承关系, 借鉴前人, 我总结a tree stucture of cv guys.David Marr----->Shimon Ullman (Weizmann) ----->Eric Grimson (MIT)----->Daniel Huttenlocher (Cornell)----->Pedro Felzenszw…

Java生鲜电商平台-促销系统的架构设计与源码解析

Java生鲜电商平台-促销系统的架构设计与源码解析 说明&#xff1a;本文重点讲解现在流行的促销方案以及源码解析,让大家对促销&#xff0c;纳新有一个深入的了解与学习过程. 促销系统是电商系统另外一个比较大&#xff0c;也是比较复杂的系统&#xff0c;作为一个卖货的&#x…

vue3中websocket用法

1.0 认识 websocket #1.0.1 什么是 websocket 和 http 协议类似&#xff0c;websocket 也是是一个网络通信协议&#xff0c;是用来满足前后端数据通信的。 #1.0.2 websocket 相比于 HTTP 的优势 HTTP 协议&#xff1a;客户端与服务器建立通信连接之后&#xff0c;服务器端只…

介绍几个医学图像处理会议

Information Processing in Medical Imaging &#xff0c; IPMI &#xff0c;医学图像处理最顶级的会议&#xff0c;两年召开一次&#xff0c;全球大概入选 50 篇左右&#xff0c;一个非常小圈子的会&#xff0c;据说通常是关在一个偏僻的地方开一周&#xff0c;会议口头报告提…