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. 【Linux开发】linux设备驱动归纳总结（四）：2.进程调度的相关概念

    linux设备驱动归纳总结(四):2.进程调度的相关概念 xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx ...

  2. windows 环境安装K8s

    文档地址: https://yq.aliyun.com/articles/508460?spm=a2c4e.11153940.blogcont221687.18.7dd57733hFolMo Dock ...

  3. VM Centos 连不上网或者ping不通问题汇总

    首先检查windows关于VM的服务有没有开启.没有开启的都开起来 通过复制形式建立的虚拟机,注意修改网卡地址.和cfg文件的UUID. 虚拟机ip能正常显示但是windows电脑ping不通虚拟机. ...

  4. Android selector一些坑

    最近给textview添加seletor时,发现textcolor和background要分开成两个selector.并且,textcolor的要再res路径下建color路径,然后在color下面建 ...

  5. python常用关键字

    转载: python关键字以及含义,用法 查看所有python关键字: import keyword print(keyword.kwlist) ['False', 'None', 'True', ' ...

  6. jump用户管理命令

    ssh-keygen -t rsa -P '' -f ~/.ssh/id_rsa手动拷贝id_rsa.pub的内容到其他机器 或者用 ssh-copy,但你得知道对方root密码 ssh-copy-i ...

  7. java中利用hanlp比较两个文本相似度的步骤

    使用 HanLP - 汉语言处理包 来处理,他能处理很多事情,如分词.调用分词器.命名实体识别.人名识别.地名识别.词性识别.篇章理解.关键词提取.简繁拼音转换.拼音转换.根据输入智能推荐.自定义分词 ...

  8. python基础之 线程_进程关系

    上图

  9. Tomcat的安全性

    Web应用程序的一些内容是受限的,只有授权的用户在提供了正确的用户名和密码后才能查看他们,servlet技术支持通过配置部署 描述器(web.xml)来对这些内容进行访问控制,那么web容器是怎么样支 ...

  10. 简单 UDP 操作类

    using System; using System.Collections.Generic; using System.Text; using System.Net; using System.Ne ...