在前端展示中有一个任务是将关键词以词云的形式展示出来,众所周知,网上由很多比较健全完善的使信息图表化的第三方资源库,今天我选择的使D3-CLOUD的词云功能,那么我们应该如何把词云运用到我们的系统当中去呢?
1.了解D3-Cloud
D3-Cloud是一个开源的词云实现,基于D3.js,使用HTML5 Canvas绘制输出,因为采用异步的方式处理,所以表现性能良好。
项目主页:https://www.jasondavies.com/wordcloud/
下载地址:https://github.com/jasondavies/d3-cloud
2.关于D3-Cloud的使用
2.1首先需要在HTML文件的<head>标签中导入d3.js和d3.layout.cloud.js两个js文件
<head> <meta charset="UTF-8"> <title></title> <script src="d3.min.js"></script> <script src="d3.layout.cloud.js"></script> </head>
2.2其次在<body>中对所要绘制的词云的具体属性进行设置
当然,需要在网页中先加入<canvas>标签,才能成功添加词云。
注释中包含了对大多数常用属性的注释和解说。
<script src="node.js" ></script> <canvas ></canvas> <script type="text/javascript"> var fill = d3.scale.category20(); //输出20种类别的颜色 ---颜色比例尺 //word cloud layout 词云布局,d3布局中为词云设立的单独的一种布局方式 //d3.layout.cloud() 构造一个词云的布局实例 //on(type,listener) 注册特定的listener来接收布局中特定类型的event。 //目前只有 word和end这两种