前言: 在vue项目中使用d3-cloud词云,从官网源码拔下来发现有些地方报错,经过一番研究操作终于弄出来了,增加了单词可点击调用方法
-
先上一张效果图:
-
npm i d3 d3-dispatch -S
下载 d3 和 d3-dispatch 两个包 -
复制github项目主目录下的 index.js 文件,我这里命名为
d3.layout.cloud.js
.
-
注意点
如果出现错误: Cannot assign to read only property 'exports' of object '#';
需要把 module.exports 改成 export default 的导出方式;
因为我用的是webpack4.0版本,在以前的版本不需要改动配置了babel也不会报错;因为webpack4.0现在统一使用的是es6的 export | import 模块语法.
-
关于 module.exports 和 exports | export 和 export default | import | require 语法区别可以参考文章
require: node 和 es6 都支持的引入
export / import : 只有es6 支持的导出引入
module.exports / exports: 只有 node 支持的导出
// d3.layout.cloud.js
// import {dispatch} from 'd3-dispatch' 或
var dispatch = require("d3-dispatch").dispatch;
var cloudRadians = Math.PI / 180,
cw = 1 << 11 >> 5,
ch = 1 << 11;
// module.exports =