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. 前端数据Mock

    参考链接:https://www.clloz.com/programming/front-end/js/2019/05/10/data-mock/?utm_medium=hao.caibaojian. ...

  2. Numpy科学计算

    NumPy介绍   NumPy(Numerical Python)是一个开源的Python科学计算库,用于快速处理任意维度的数组. NumPy支持常见的数组和矩阵操作.对于同样的数值计算任务,使用Nu ...

  3. POP与OOP编程模式对比

    面向过程:(procedure oriented programming 即:POP) 代表:C/C++ 向过程程序设计,它是以功能为中心来进行思考和组织的一种编程方式,强调的是系统的数据被加工和处理 ...

  4. [python] super() 用法

    问题的发现与提出 在Python类的方法(method)中,要调用父类的某个方法,在Python 2.2以前,通常的写法如下: class A: def __init__(self): print & ...

  5. IIS7多站点ssl配置及http自动跳转到https

    SSL证书配置参考如下: http转https实战教程iis7.5 window08 IIS7安装多域名SSL证书绑定443端口 关键是修改C:\Windows\System32\inetsrv\co ...

  6. 小菜鸟之java异常

    一.异常简介 什么是异常? 异常就是有异于常态,和正常情况不一样,有错误出错.在java中,阻止当前方法或作用域的情况,称之为异常. java中异常的体系是怎么样的呢? 1.Java中的所有不正常类都 ...

  7. Robot Framework-失败用例自动重跑

    使用自动化脚本进行测试,经常受环境影响等各方面导致本能成功的脚本失败,下面介绍了RFS框架下,失败重跑的方法: 通过改写RobotFramework源代码增加–retry选项,实现test级别的失败用 ...

  8. Ubuntu-虚拟机-忘记登陆密码

    前提 在我们使用Ubuntu虚拟机的过程中,偶尔会出现密码忘了的尴尬事情.里面又有重要资料,不能重新安装,这时我们要重置密码,接下来,让我们共同学习! 重启虚拟机-重启时按住 shift 会出现以下 ...

  9. linux centos 7.3 编译安装mysql5.7

    #安装依赖 yum update yum install -y gcc gcc-c++ make libtool zlib zlib-devel openssl openssl-devel pcre ...

  10. python_0基础开始_day06

    第六节 1.小数据池 ==,is,id ==:查看等号两边的值是否一样 a = 9b = 9print(a == b) # 返回Truec = "dog"d = "dog ...