本文介绍了如何在Vue项目中引入d3.v3.min.js来展示知识图谱。首先，通过npm安装指定版本的d3以避免版本不兼容问题。然后，将原本在html中的kg.js方法转换为Vue组件内的js部分。在Vue的生命周期中，由于created阶段DOM未渲染完成，导致无法获取元素。因此，使用mounted生命周期钩子确保在DOM渲染后进行知识图谱的加载操作。
在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中
- npm install d3
- 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节点进行一些需要的操作。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
