前言
因为发现使用鱼骨图/因果图的人少之又少 在掘金上甚至找不到一篇具体的实现文章，在 Github 上面搜索 鱼骨图 关键字的项目最多的 star 只有 32 星，而且没人维护。为了造福后面使用的人，作者整理了 Gihub 上面几个能搜索得到实现鱼骨图/因果图的方式，框架是以 Angular 为框架，但只是作为一个底子，想要修改为 Vue 或者 React 也并不难。
相关项目已放到GitHub上有需要自取，帮助到了小伙伴的话不妨点个star～
基于 d3 自己实现
对应文件目录：d3-fishbone
实现效果:
优点: 基于 d3 实现，自己想实现什么自己就画什么。
缺点：学习成本很高,画线的逻辑也相对比较复杂，我实现的只能支持到第三层级(问题->大要因->小要因)，如果还想更深层级的话，得自己手动实现。
基于 GitHub 项目 uia-fishbone
源项目地址
对应文件目录：uia-fishbone
实现效果:
优点：开箱即用，不需要自己绘画。
缺点：层级也只支持到 3 层，如果存在 4 层，点击三层的节点也能查看到。
使用方式:
除了对应的文件代码之外，还需要在angular.json的 script 中引入
"scripts": ["node_modules/d3/dist/d3.min.js",
"src/app/uia-fishbone/uia-fishbone.js"]
额外提醒 d3 版本为 7.9.0 的话，对应的路径为node_modules/d3/dist/d3.min.js如果不是 7.9.0，使用者得自己注意一下d3.min.js所在的目录
基于 GitHub 项目 mark-fishbone
源项目地址
对应文件目录：mark-fishbone
实现效果:
优点：层级无限制。还附带额外的工具函数(导出、查询等)。
缺点：样式太过丑陋了，想美化的话得自己更改源码。
使用方式:
除了对应的文件代码之外，还需要在angular.json的 script 中引入
"scripts": ["src/app/mark-fishbone/MakFishBone/jtopo-0.4.8-min.js",
"src/app/mark-fishbone/MakFishBone/MakFishBone.js"]
基于 GitHub 项目 d3.fishbone-js（推荐）
源项目地址
对应文件目录：d3-fishbone-v2
实现效果:
优点：
- 层级无限制。
- 样式美观
缺点： 使用的 d3 版本为 3.5.17(过老)
