作为一名前端小白，完成项目任务时也是一个不断挖坑不断跳坑的过程，这两天在完成一个ETL平台导入转换功能的模块，遇到了很多问题，现在也在逐个解决。 1）id调用canvas失败 经多次尝试，发现只能使用ref调用。 在尝试过程中，在无子组件页面中，使用id与ref的效果相同，但是放入到我已经搭载好的页面框架中却只能使用ref。 2）解决掉canvas问题后，发现若全部自己编写绘制转换关系部分的功能，耗时耗力，决定引入相关的开发组件——流程图绘制组件。
1）通过多方查阅资料，发现由于我使用了页面分区组件，使得无法直接对其dom元素进行操作 vue官网描述：ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 r e f s 对 象 上 。 如 果 在 普 通 的 D O M 元 素 上 使 用 ， 引 用 指 向 的 就 是 D O M 元 素 ； 如 果 用 在 子 组 件 上 ， 引 用 就 指 向 组 件 实 例 调 用 子 组 件 ： 给 子 组 件 定 义 < c a n v a s r e f = ” y e a h ” > < / c a n v a s > 调 用 这 个 组 件 l e t c a n v a s = t h i s . refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例 调用子组件： 给子组件定义 <canvas ref=”yeah” ></canvas> 调用这个组件 let canvas=this. refs对象上。如果在普通的DOM元素上使用，引用指向的就是DOM元素；如果用在子组件上，引用就指向组件实例调用子组件：给子组件定义<canvasref=”yeah”></canvas>调用这个组件letcanvas=this.refs.yeah 2）为选择一个适合项目的插件，我进行了一系列的调研 一开始我只是简单的进行了组态插件的搜索，并没有找到一个很好的插件（只找到了一个13年公布关于c语言的开源思路http://www.qtcn.org/bbs/read-htm-tid-57751.html）。之后开始了对流程图js插件的调研，发现同类插件有很多，比较常见的包括以下五种： flowchart.js、 go.js、 joint.js、 jsPlumb.js、 d3.js 详细介绍请看https://blog.csdn.net/alvinnoending/article/details/52937689
通过对这几个js插件的了解，并结合我们自己项目的需求，发现了已有etl工具开发使用了 jsPlumb.js插件，既然有大佬使用过，那我跟着肯定没有问题啦。
虽然我只是按照https://blog.csdn.net/alvinnoending/article/details/52937689这篇文章使用，但是导入过程中遇到了诸多的问题，接下来给大家介绍一下我导入成功的最终步骤。 下载jsplumb.js在vue框架下的插件 下载d3.js插件 核对.json文件是否添加成功 开始调用（调用过程中可以按照本人的参考文章进行）
导入过程毕竟不是那么的顺利，下面给大家简单介绍一下我遇到的问题以及解决方案。 1）在子组件框架下，因无法id无效导致无法进行调用 暂时还未找到解决方案，选择自己搭建页面布局
2）生命周期渲染问题 最开始发现在methods中效果不理想，放在了mounted里边，得到了解决。为了能够更好的效果，更改到updated中，所有问题完美解决。 mounted：在页面渲染过程中 updated：页面渲染完成后，每次数据发生变化时
3）anchor失效问题 尝试了多种方法，但是从树上拖拽下来的节点并没有anchor，也因此无法进行连线。 d3.seletor产生的节点被封装在nodelist中，是一个节点数组，也因为完美每次只需要添加一个节点，所以在进行anchor添加时传入的参数从node改为node[0]，完美的解决问题
4）链接信息返回 jsPlumb.getAllConnections() 可以返回当前页面所有链接信息
