D3 企业关系图谱 企业构成图谱 股权穿透图 股权结构图 关联方认定图

已于 2023-04-22 13:40:07 修改
阅读量2.1k 收藏 7
点赞数 4
分类专栏： vue3 D3 文章标签： 前端
于 2023-04-22 13:39:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Koreyoshi123654/article/details/130303817
版权

前言：之前说做了项目，这个项目黄了，公司跑路了，代码就拿出来分享，主要就是实现各种类似企查查的各种图谱，欢迎交流。目前已大致实现了：
D3 企业关系图谱 企业构成图谱 股权穿透图 股权结构图 关联方认定图

代码是不标准的vue3（这是vue3写的第一个项目）

企业关系图谱 实现效果如下：（右侧的功能菜单也都实现了）

在这里插入图片描述

企业构成图谱 实现效果如下：在这里插入图片描述
股权穿透图谱 实现效果如下：（右侧的功能菜单也都实现了）

在这里插入图片描述

股权结构图谱 效果如下：（右侧的功能菜单也都实现了）

最低0.47元/天 解锁文章
Koreyoshi·
关注
  • 4
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 12
    评论
专栏目录
使用d3实现类似脑图，股权穿透图，关系图谱
weixin_38164631的博客
07-30 1万+
前言 最近工作需要完成一个股权穿透图，找了好多文档发现都不满足需求，最终选择d3.js来实现，包含子集的收缩展开，交互以及其他功能。之前由于没做过类似关系图以及不了解d3，踩了很多坑，我会尽可能将代码描述清楚（毕竟花了两个大夜），建议提前了解svg的简单使用和运行机制，d3的基本使用。 使用d3不像其他图表，d3的使用自由度极大，因此可以完成绝大多数图表需求，时间充足的话，可以逐步完成代码，理解实现思路后做其他修改就很简单了。话不多说，先贴图。 我尽可能简化了代码，主要看实现思路，后续增加或删减功能在此基
vue3+d3实现股权穿透图
Quzq11的博客
01-16 600
2.使用 components/EquityChart/index.vue (按钮组图标去阿里矢量图标库下载图片至 images)3.调用 views/HomeView.vue。
vue-d3-graph:vue+d3v6实现动态知识图谱可视化展示（包含2D和3D图谱展示）
05-10
vue-d3-graph 基于之前的代码进行修改： 目前只是最基础的版本，主要是提供代码的参考，后续会完善代码内容 一、代码使用说明 1. 依赖安装 yarn install 推荐使用 cnpm 来安装，速度更快： # 二选一 npm install -g cnpm --registry=https://registry.npm.taobao.org npm install cnpm -g --registry=https://registry.nlark.com cnpm i 2. 项目启动 yarn serve 3. 项目打包 yarn build 4. 使用lint检查并修复文件 yarn lint Customize configuration See . 二、代码功能清单 d3初始化 数据解析 数据渲染 图查询更新视图 平移与缩放 文字显示 节点拖拽 鼠标浮动事件 鼠标单击事件
【react d3 v4】react hooks结合d3实现类似企查查的股权穿透图、股权结构图
weixin_62714043的博客
01-10 709
umi+antd-admin 框架中使用hooks结合d3完成股权穿透图和股权结构图(web)
【vue d3 v4】vue2结合d3实现类似企查查的股权穿透图、股权结构图
weixin_62714043的博客
01-10 1887
vue3 框架中使用vue2代码结合d3完成股权穿透图和股权结构图（h5）
D3js关系图谱（力导向布局）
魑魅魍魉9527
09-15 5185
"d3": "^3.5.17", import React, { Component } from 'react' import * as d3 from 'd3' import './chart.css' import { List, message, Avatar, Spin } from 'antd'; import InfiniteScroll from 'react-infinite-scroller'; export class Chart1 extends Component {...
d3js 模块关系图/依赖图
qq_16381291的博客
07-15 590
d3js v7 模块间依赖示意
d3.js 实现企业图谱(基于vue)
二两毛豆的博客
06-04 3136
d3.js 企业图谱
relation-graph实现企业股权穿透图，关系图谱等(类似天眼查股权穿透图)
weixin_39611547的博客
03-06 3190
relation-graph实现企业股权穿透图，关系图谱等(类似天眼查股权穿透图)
D3-股权穿透图
liujiawei567的博客
08-12 3160
安装·使用 // cdn 引入 <script scr="./saveSvgAsPng.js"></script> // 模块引用 npm install save-svg-as-png -D npm install d3 -D // 在出口文件main.js中 import saveSvgAsPng from "save-svg-as-png"; import d3from "d3"; Vue.prototype.$saveSvgAsPng = saveSvgAsPng;
d3关系图开源demo
11-07
d3 关系 svg demo 样例 广度排序 d3 关系 svg demo 样例 广度排序
[知识图谱实战篇] 七.HTML+D3实现关系图谱搜索功能（源码）
02-15
本文主要增加了一个搜索功能，通过该搜索框能展示搜索节点的相关内容，同时在张老师的基础上增加搜索节点相关联的边及节点。前面作者讲解了很多知识图谱原理知识，包括知识图谱相关技术、Neo4j绘制关系图谱等，但仍缺少一个系统全面的实例。为了加深自己对知识图谱构建的认识，为后续创建贵州旅游知识图谱打下基础，作者深入学习了张宏伦老师的网易云课程（星球系列电影），并结合自己的理解和技术分享了该系列专栏，从数据采集、数据展示、数据分析到知识图谱构建，文章后续还会讲解中文数据的实体识别、关系抽取、知识计算等。 --------------------- 作者：Eastmount 来源：CSDN 原文：https://blog.csdn.net/Eastmount/article/details/87270150 版权声明：本文为博主原创文章，转载请附上博文链接！
d3实现部分关系隐藏与显示
08-02
d3实现部分关系隐藏与显示。例如：AB之间的关系有：朋友、亲戚、同学，我想要把朋友隐藏起来，又不改变json文件（这样的好处是不刷新界面，用户体验好）。
d3关系图谱.html
07-30
最近工作需要完成一个股权穿透图，找了好多文档发现都不满足需求，最终选择d3.js来实现，包含子集的收缩展开，交互以及其他功能。之前由于没做过类似关系图以及不了解d3，踩了很多坑，我会尽可能将代码描述清楚...
企业关系股权穿透图react+d3自用上游企业控股某公司
最新发布
03-04
企业关系股权穿透图react+d3自用上游企业控股某公司自用自用备份
d3+jQuery类似天眼查企查查的股权穿透图代码.zip
09-23
"d3+jQuery类似天眼查企查查的股权穿透图代码.zip" 提供了一种有效的解决方案，它结合了d3.js库的强大功能和jQuery的易用性，为用户呈现了直观的企业股权结构图。本文将详细介绍这个代码包中的关键知识点，并探讨其...
d3.js制作股权穿透图
06-22
制作股权穿透 投资结构图 使用方法 ：该dome有两个文件 一个是html文件 另外一个是需要加载的json数据结构的文件，格式：{ "name": "马云", "tap":"节点", "children": [ { "name": "1中国平安人寿保险股份...
D3.js实现人物关系图谱有移动、拖拽、放大功能
04-28
在“D3.js实现人物关系图谱有移动、拖拽、放大功能”这个主题中，我们将深入探讨如何利用D3.js来创建交互式的人物关系网络图，并实现平移、缩放和拖拽等动态效果。 首先，理解D3.js的基础是关键。D3.js全称为Data-...
关系图、股权图 vue 开发
weixin_48408736的博客
07-08 1969
继承、组织图 可多级展开、继承，显示高亮信息等 股权穿透图 可多级展开、继承，动画展示，自定义节点 关系图 可移动、拖拽、展示图片、展示关系等等
代码生成vue2+d3.js股权穿透图鼠标滚轮放大缩小如何重置
07-28
你可以通过以下步骤来重置Vue2和D3.js股权穿透图的鼠标滚轮放大缩小功能： 1. 首先，在Vue组件中引入D3.js库和相关的依赖项。确保你已经安装了D3.js库，可以通过npm或者直接引入CDN来获取。 ```javascript import * as d3 from 'd3'; ``` 2. 在Vue组件的mounted生命周期钩子中，初始化D3.js图表，并为股权穿透图添加鼠标滚轮事件监听器。 ```javascript mounted() { // 初始化D3.js图表 this.initChart(); }, methods: { initChart() { // 创建D3.js的SVG容器 const svg = d3.select('#chart') .append('svg') .attr('width', '100%') .attr('height', '100%') .append('g') .attr('transform', 'translate(0,0)'); // 在SVG容器中绘制股权穿透图 // 添加鼠标滚轮事件监听器 svg.on('wheel', () => { // 获取鼠标滚轮事件的delta值 const delta = d3.event.deltaY; // 根据delta值进行放大或缩小操作 // 阻止默认滚动行为 d3.event.preventDefault(); }); } } ``` 3. 在组件的beforeDestroy生命周期钩子中，移除鼠标滚轮事件监听器。 ```javascript beforeDestroy() { // 移除鼠标滚轮事件监听器 d3.select('#chart').on('wheel', null); } ``` 这样，你就可以通过初始化D3.js图表并添加鼠标滚轮事件监听器来实现股权穿透图的鼠标滚轮放大缩小功能，并在组件销毁前移除事件监听器以避免内存泄漏。记得根据你的具体需求修改代码中的细节。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 12
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值