html中使用d3-cloud词云

最新推荐文章于 2024-05-26 09:37:52 发布

GY_Grace

最新推荐文章于 2024-05-26 09:37:52 发布

阅读量1.6w

点赞数 2

文章标签： html5 d3 词云

本文链接：https://blog.csdn.net/GY_Grace/article/details/72863646

版权

在前端展示中有一个任务是将关键词以词云的形式展示出来，众所周知，网上由很多比较健全完善的使信息图表化的第三方资源库，今天我选择的使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这两种

最低0.47元/天解锁文章

GY_Grace

关注

2
点赞
踩
20

收藏

觉得还不错? 一键收藏
6
评论
html中使用d3-cloud词云

在前端展示中有一个任务是将关键词以词云的形式展示出来，众所周知，网上由很多比较健全完善的使信息图表化的第三方资源库，今天我选择的使D3-CLOUD的词云功能，那么我们应该如何把词云运用到我们的系统当中去呢？1.了解D3-CloudD3-Cloud是一个开源的词云实现，基于D3.js，使用HTML5 Canvas绘制输出，因为采用异步的方式处理，所以表现性能良好。项目主页：https:/
复制链接

扫一扫