vue中使用 d3-cloud 词云

前言: 在vue项目中使用d3-cloud词云,从官网源码拔下来发现有些地方报错,经过一番研究操作终于弄出来了,增加了单词可点击调用方法

• d3-cloud github地址

• d3 API中文手册

  先上一张效果图:

1. npm i d3 d3-dispatch -S 下载 d3 和 d3-dispatch 两个包

2. 复制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 =