D3-Cloud是一个开源的词云实现，基于D3.js，使用HTML5 Canvas绘制输出，因为采用异步的方式处理，所以表现性能良好。

项目主页：https://www.jasondavies.com/wordcloud/

下载地址：https://github.com/jasondavies/d3-cloud

1.首先需要在HTML文件的<head>标签中导入d3.js和d3.layout.cloud.js两个js文件

<!doctype html>

<html lang="en">

<head>

   <meta charset="UTF-8">

   <title></title>

   <script src="d3.min.js"></script>

   <script src="d3.layout.cloud.js"></script>

</head>

<body>

<div id="d3_cloud"></div>

<script>

var words_list = [

        {text:"互联网医疗", size:'20'},

        {text:"基因检测", size:'30'},

        {text:"医疗服务", size:'26'},

        {text:"再生医学", size:'30'},

        {text:"生物科技", size:'26'},

        {text:"医药", size:'34'},

        {text:"免疫治疗", size:'16'},

        {text:"体外诊断", size:'20'},

        {text:"医疗设备", size:'30'},

        {text:"医疗影像", size:'24'},

        {text:"脑科学", size:'20'},

    ];

    var fill = d3.scale.category20();  //输出20种类别的颜色 ---颜色比例尺

    var layout = d3.layout.cloud()

        .size([360, 200])  //size([x,y]) 词云显示的大小

        .words(words_list)

        .padding(5)

        .rotate(function() { return ~~(Math.random() * 2) * 0; })

        .font("Impact")

        .fontSize(function(d) { return d.size; })

        .on("end", draw);

    layout.start();

    function draw(words) {

        d3.select("#d3_cloud").append("svg")

            .attr("width", layout.size()[0])

            .attr("height", layout.size()[1])

            .append("g")

            .attr("transform", "translate(" + layout.size()[0] / 2 + "," + layout.size()[1] / 2 + ")")

            .selectAll("text")

            .data(words)

            .enter().append("text")

            .style("font-size", function(d) { return d.size + "px"; })

            .style("font-family", "Impact")

            .style("fill", function(d, i) { return fill(i); })

            .attr("text-anchor", "middle")

            .attr("transform", function(d) {

                return "translate(" + [d.x-2, d.y] + ")rotate(" + d.rotate + ")";

            })

            .text(function(d) { return d.text; });

    }

    //word cloud layout  词云布局，d3布局中为词云设立的单独的一种布局方式
    //d3.layout.cloud() 构造一个词云的布局实例
    //on(type,listener) 注册特定的listener来接收布局中特定类型的event。
    //目前只有 word和end这两种event是被支持的。
    //word这种event在该布局完成对每一个word的布局时被调度。
    //end这种活动在改布局完成对所有的words的布局时被调度。
    //注册的listener通过两个参数被调度：
    //被成功布局的单词数组
    //以[{x0,y0},{x1,y1}]形式为界限，代表words范围    a bounds object of the form [{x0, y0}, {x1, y1}] representing the extent of the placed objects.
    //
   
    //start 布局算法   初始化单词数组上的各种参数，并且从最大的单词开始布局单词，
    //从矩形区域的中间开始，每一个单词在布局时都要检测是否与先前已经布局好的单词位置冲突。
    //一旦检测到冲突，该算法会沿着螺旋线重新布局该单词。
    //如果一个单词不能在沿着螺旋线的任何地方被布局，该单词最终将不会显示在词云图上，该问题可能在后续版本中被解决。

    //stop() 停止布局算法

    // timeInterval([time])   布局时通过setInterval来避免浏览器的event loop被锁住。
   
    //words([words array].map(function(d)(return{text:d;size:某一个数值}))
    //为words数组中的每一个word分配一个字体大小

</script>

</body>

</html>

d3 词云使用的更多相关文章

  1. Word Cloud (词云) - JavaScript

    在上一篇中已经分享了用 Python 创建词云了.接下来继续总结其他创建词云的方法. >> Create Word Cloud via JavaScript JavaScript 可以借助 ...

  2. 用Python玩转词云

    第一步:引入相关的库包: #coding:utf-8 __author__ = 'Administrator' import jieba #分词包 import numpy #numpy计算包 imp ...

  3. R语言之词云：wordcloud&wordcloud2安装及参数说明

    一.wordcloud安装说明 install.packages("wordcloud"); 二.wordcloud2安装说明 install.packages("dev ...

  4. 使用R语言将微信记录制作成词云（简洁）--情人节奥义

    一.导出并读入微信聊天记录     参照百度的方法,使用同步助手.安装同步助手--连接手机(安卓苹果均可)--点击"其他功能"--点击微信图标即可进入聊天记录导出界面(非常简单). ...

  5. R系列：分词、去停用词、画词云（词云形状可自定义）

    附注:不要问我为什么写这么快,是16年写的. R的优点:免费.界面友好(个人认为没有matlab友好,matlab在我心中就是统计软件中极简主义的代表).小(压缩包就几十M,MATLAB.R2009b ...

  6. 更新几篇之前写在公众号上的文章：线性可分时SVM理论推导；关联分析做捆绑销售和推荐；分词、去停用词和画词云

    适合阅读人群:有一定的数学基础. 这几篇文章是16年写的,之前发布在个人公众号上,公众号现已弃用.回过头来再看这几篇文章,发现写的过于稚嫩,思考也不全面,这说明我又进步了,但还是作为学习笔记记在这里了 ...

  7. 如何用Python做词云（收藏）

    看过之后你有什么感觉?想不想自己做一张出来? 如果你的答案是肯定的,我们就不要拖延了,今天就来一步步从零开始做个词云分析图.当然,做为基础的词云图,肯定比不上刚才那两张信息图酷炫.不过不要紧,好的开始 ...

  8. Python给小说做词云

    闲暇时间喜欢看小说,就想着给小说做词云,展示小说的主要内容.开发语言是Python,主要用到的库有wordcloud.jieba.scipy.代码很简单,首先用jieba.cut()函数做分词,生成以 ...

  9. echarts之词云随机颜色的配置

    echarts中的词云字体产生随机颜色,最主演的是要引入worldcloud.js,另外还要有jquery.js文件与echarts.js文件的引入,通过配置即可实现词云随机颜色的产生.下面为大家介绍 ...

随机推荐

  1. 【Python开发】python读写文件，和设置文件的字符编码比如utf-8

    一. python打开文件代码如下: f = open("d:\test.txt", "w") 说明: 第一个参数是文件名称,包括路径: 第二个参数是打开的模式 ...

  2. aws 预留实例到期监控

    环境准备 安装python的aws 开发工具包 pip install boto3 配置aws账号 [root@zabbix service]# aws configure AWS Access Ke ...

  3. 5.写一个sh脚本，可以通过一台机器控制多台机器

    先创建一个脚步文件 对这个脚本进行编辑 [hadoop@node1 ~]$ vim xcall.sh 给脚本赋予权限 执行脚本 把脚本移动到 /usr/local/bin/目录下 [hadoop@no ...

  4. 纯前端表格控件SpreadJS以专注业务、提升效率赢得用户与市场

    提起华为2012实验室,你可能有点陌生. 但你一定还对前段时间华为的那封<海思总裁致员工的一封信>记忆犹新,就在那篇饱含深情的信中,我们知道了华为为确保公司大部分产品的战略安全和连续供应, ...

  5. 设计模式:解释器模式(Interpreter)

    为人处事是一门大学问,察言观色.听懂弦外之音都是非常重要的,老板跟你说“XX你最近表现平平啊,还得要多努力”,如果你不当回事,平常对待,可能下次就是“XX,恩,你人还是不错,平常工作也很努力,但是我想 ...

  6. HDU 3416 Marriage Match IV (最短路建图+最大流）

    (点击此处查看原题) 题目分析 题意:给出一个有n个结点,m条单向边的有向图,问从源点s到汇点t的不重合的最短路有多少条,所谓不重复,意思是任意两条最短路径都不共用一条边,而且任意两点之间的边只会用一 ...

  7. 2019中山纪念中学夏令营-Day21[JZOJ]

    2019中山纪念中学夏令营-Day21[JZOJ] 提高组(B组模拟赛)Team_B (由于本人太弱,并没有订正完题目) (题解大部分是从官方题解文件上摘来的) 日常膜拜大神:じやゆん蒟蒻 正文部分: ...

  8. 数据结构（三） 树和二叉树，以及Huffman树

    三.树和二叉树 1.树 2.二叉树 3.遍历二叉树和线索二叉树 4.赫夫曼树及应用 树和二叉树 树状结构是一种常用的非线性结构,元素之间有分支和层次关系,除了树根元素无前驱外,其它元素都有唯一前驱. ...

  9. CentOS 7系统安装Jenkins

    一.jenkins 介绍 Jenkins是一个开源的.可扩展的持续集成.交付.部署(软件/代码> 的编译.打包.部署)基于web界面的平台. 简单说,就是各种项目的"自动化" ...

  10. 13 UA池和代理池

    一. 下载中间件 框架图 下载中间件(Downloader Middlewares) 位于scrapy引擎和下载器之间的一层组件. - 作用: (1)引擎将请求传递给下载器过程中, 下载中间件可以对请 ...