使用d3实现类似脑图，股权穿透图，关系图谱

最新推荐文章于 2024-09-01 08:47:28 发布

dk前端

最新推荐文章于 2024-09-01 08:47:28 发布

阅读量1w

点赞数 7

分类专栏： d3.js关系图谱文章标签： d3.js 关系模型 es6

本文链接：https://blog.csdn.net/weixin_38164631/article/details/107693747

版权

本文介绍如何利用d3.js实现股权穿透图，包括配置方法、绘制矩形框与内部文本、连线计算及动画效果。通过d3.js的高自由度，实现了子集的收缩展开和交互功能，适合需要自定义关系图谱的场景。文章分享了实现思路和遇到的难点，并提供了源码供直接使用。

摘要由CSDN通过智能技术生成

前言

最近工作需要完成一个股权穿透图，找了好多文档发现都不满足需求，最终选择d3.js来实现，包含子集的收缩展开，交互以及其他功能。之前由于没做过类似关系图以及不了解d3，踩了很多坑，我会尽可能将代码描述清楚（毕竟花了两个大夜），建议提前了解svg的简单使用和运行机制，d3的基本使用。
使用d3不像其他图表，d3的使用自由度极大，因此可以完成绝大多数图表需求，时间充足的话，可以逐步完成代码，理解实现思路后做其他修改就很简单了。话不多说，先贴图。
在这里插入图片描述

我尽可能简化了代码，主要看实现思路，后续增加或删减功能在此基础上都算方便。

我会将源码贴出来，可以直接使用。记录一下我遇到的坑。

配置方法

getTreeConfig方法里包含内部需要配置项,可以调整数值查看效果。

getTreeConfig() {
   
    let treeConfig = {
   margin: {
   top: 10, right: 5, bottom: 0, left: 30}}
    treeConfig.chartWidth = this.d3.select('#svgWrap')[0][0].clientWidth;
    treeConfig.chartHeight = this.d3.select('#svgWrap')[0][0].clientHeight;
    treeConfig.centralHeight = treeConfig.chartHeight / 2;
    treeConfig.centralWidth = treeConfig.chartWidth / 2;</