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

已于 2023-04-22 13:40:07 修改
阅读量2.3k 收藏 8
点赞数 4
分类专栏： vue3 D3 文章标签： 前端
于 2023-04-22 13:39:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/koreyoshi123654/article/details/130303817
版权
本文分享了一个使用D3.js库创建的企业关系图谱、企业构成图谱、股权穿透图、股权结构图和关联方认定图的项目。项目基于不标准的Vue3框架，详细展示了各种图谱的实现效果，并提供了源码供读者交流学习。
摘要由CSDN通过智能技术生成

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

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

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

在这里插入图片描述

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

在这里插入图片描述

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

最低0.47元/天 解锁文章
Koreyoshi·
关注
专栏目录
基于D3.js的企业关联图谱——风控可视化
李姆斯的博客
01-30 2215
说明 项目背景 分析企业自身的主要数据，企业与企业、企业与个人、个人与个人之间的关系数据，建设企业的关联关系图谱，识别对公客户的关联关系，并找出关联关系中的风险点。 代码说明 以下代码将是我GitHub中的其中一个页面，主要目的是展示企业之间的担保关系，其他关系的代码可以以此进行推演。主要框架是D3.js 开源地址（有用的话记得follow一下并点个star哦） https://github.com/lebron-li/Visualization-of-risk-control-based-on
非常完美的d3展示关系图形，非常推荐给需要对neo4j数据力导向图的朋友使用
09-13
这是一款对前端框架d3封装比较完善的一个示例，简单、易懂，非常推荐给需要对neo4j数据力导向图的朋友使用，包含了节点的动态添加（这个是重点）
d3+jQuery类似天眼查企查查的股权穿透图代码.zip
09-23
有兴趣刚需的可以自己下载，非常实用的jquery代码，可以完美运行，有能力的还可以二次修改！
d3.js+vue生成知识图谱--实现节点拖拽，图谱缩放，节点之间边的关系的显示
最新发布
m0_54479027的博客
07-15 792
功能：知识图谱节点的显示、拖拽、缩放功能的实现
d3关系图开源demo
11-07
d3 关系 svg demo 样例 广度排序 d3 关系 svg demo 样例 广度排序
企业关系股权穿透图react+d3自用上游企业控股某公司
03-04
企业关系股权穿透图react+d3自用上游企业控股某公司自用自用备份
D3.js关系图表&组织结构图表
05-02
支持节点拖拽 支持节点拖拽并固定位置 支持鼠标浮到节点显示节点信息 支持鼠标浮到节点隐藏不相关的节点及线 支持画布整体缩放移动 支持双击节点隐藏不相关的节点及线 可以累加双击的节点 支持双击画布空白处还原显示所有节点信息
d3关系图谱.html
07-30
最近工作需要完成一个股权穿透图，找了好多文档发现都不满足需求，最终选择d3.js来实现，包含子集的收缩展开，交互以及其他功能。之前由于没做过类似关系图以及不了解d3，踩了很多坑，我会尽可能将代码描述清楚（毕竟花了两个大夜），建议提前了解svg的简单使用和运行机制，d3的基本使用。 使用d3不像其他图表，d3的使用自由度极大，因此可以完成绝大多数图表需求，时间充足的话，可以逐步完成代码，理解实现思路后做其他修改就很简单了。
仿企查查、天眼查 d3关联关系图 力项导图
weixin_38491286的博客
08-19 3333
研究完股权穿透图跟企业图谱 最近又写了一个企业、人物的力项导图 力导向图可以直观看出各个元素之间的关系 具体的代码就不贴了，官网很多 demo 都可以直接拿来用 先看效果 d3灵活的地方就在于它可以 自定义很多东西 比如连接线 图形 等 因为d3官方 有很多现成的demo 都可以直接拿来用 文档也比较详细，大部分图谱都包含了 当然也可以自己添加动画、一些牛逼的交互 感兴趣的朋友可以研究下 互相交流 ...
D3js关系图谱（力导向布局）
魑魅魍魉9527
09-15 5260
"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 {...
d3-关系图
空谷足音的博客
12-20 2111
1.做项目中，因需要，用d3写了个人车关系图 项目地址：https://github.com/davidpan123/vue-d3
基于d3js的simulation力导图canvas实现的带缩略图的关系图谱案例
08-10
基于d3.js的simulation力导图，canvas实现的带缩略图的关系图谱案例
D3js横向纵向关系图（加箭头，连接线文字描述，折叠）
07-25
使用d3.js绘制组织关系图，有横向和纵向的以及箭头流向，连接线文字描述，层级折叠。
d3+jQuery类型关系图谱
09-30
d3+jQuery类型关系图谱，组织架构图，类似于天眼查，企查查的股权图，内容有横版，竖版两种图形结构，方便修改，支持鼠标拖动和鼠标滚轮控制放大缩小。
d3.js关系图谱示例
04-28
d3关系树图，可控制方向实现树节点展开和收缩
D3.js实现人物关系图谱有移动、拖拽、放大功能
04-28
D3.js实现人物关系图谱有移动、拖拽、放大功能
使用d3实现类似脑图，股权穿透图，关系图谱
热门推荐
weixin_38164631的博客
07-30 1万+
前言 最近工作需要完成一个股权穿透图，找了好多文档发现都不满足需求，最终选择d3.js来实现，包含子集的收缩展开，交互以及其他功能。之前由于没做过类似关系图以及不了解d3，踩了很多坑，我会尽可能将代码描述清楚（毕竟花了两个大夜），建议提前了解svg的简单使用和运行机制，d3的基本使用。 使用d3不像其他图表，d3的使用自由度极大，因此可以完成绝大多数图表需求，时间充足的话，可以逐步完成代码，理解实现思路后做其他修改就很简单了。话不多说，先贴图。 我尽可能简化了代码，主要看实现思路，后续增加或删减功能在此基
d3.js实现股权穿透图(vue+d3.js)
wangjie的博客
05-06 3400
前端实现股权穿透图（d3.js）
代码生成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图表并添加鼠标滚轮事件监听器来实现股权穿透图的鼠标滚轮放大缩小功能，并在组件销毁前移除事件监听器以避免内存泄漏。记得根据你的具体需求修改代码中的细节。
评论 13
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值