前端展示知识图谱 html转vue

在vue中如果需要引入外部js，用下面的语句：

 <script src="../../../dist/static/js/materialize.min.js"></script>

原文件中，单独的kg.js文件中有下面这样的方法：
我将其直接写到vue文件的js部分：

红框是注意更改的地方。
原html中，引入外部的d3.js文件：

   <script src="js/d3.v3.min.js"></script>

我在vue中

1. npm install d3
2. import d3 from “d3”

但是这样直接安装的是最新版本的d3,导致前端报错，很多d3的方法找不到，又由于原html的文件引入的是d3.v3.min.js，于是换用npm install d3@3.5.17 –save ，安装了3.5.17版本的d3，解决了报错

我一开始是使用点击按钮之后加载知识图谱，流程如下：


这样没有问题，但是换做在created（）中调用方法就会出错，通过打印发现，


在created的时候没有获取到id为container的对象，
解决方法如下，利用Vue中的mounted：

 mounted:function(){
      this.KnowLedge();//需要触发的函数
  },

created 和mounted 的区别是：
created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。