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. 【并行计算-CUDA开发】Windows下opencl环境配置

    首先声明我这篇主要是根据下面网站的介绍, 加以修改和详细描述,一步一步在我自己的电脑上实现的, http://www.cmnsoft.com/wordpress/?tag=opencl&pag ...

  2. Object中有哪些方法及其作用

    你知道Object中有哪些方法及其作用吗? 一.引言 二.Object方法详解 1.1.registerNatives() 1.2.getClass() 1.2.1.反射三种方式: 1.3.hashC ...

  3. 【模板】SPFA（不完全详解）

    一种最短路求法(个人觉得比DIJKSTRA好用) 用于有向图. 大概思路:从根节点开始,枚举每一个点,同时更新他们所联通的点的最短路径,如果路径被更新,则把这个点入队,一直重复这个操作直到队伍为空为止 ...

  4. HDU-5238 Calculator

    题目描述 给定一个关于 \(x\) 的表达式,形如下例:\(×4+2^3+8×6\) 按如下方法计算:\((((x×4)+2)^3+8)×6\) 运算符只有 加号,乘号,幂运算三种,给定的式子中有 \ ...

  5. 在字符串中找出第一个只出现一次的字符，Python实现

    要求: 1. 不能依赖库函数直接实现此功能,需使用基础的数据结构实现 2. 时间复杂度 O(n) 思路: 1. 用字典存储每个字符在字符串中出现的次数 2. 列表是有序的,用来存储字符的出现先后 3. ...

  6. tensorflow 使用tfrecords创建自己数据集

    直接采用矩阵方式建立数据集见:https://www.cnblogs.com/WSX1994/p/10128338.html 制作自己的数据集(使用tfrecords) 为什么采用这个格式? TFRe ...

  7. 从0开始入门ssm-crm系统实战

    喜欢就点个赞呗! GitHub项目ssm-learn-crm show me the code and take to me,做的出来更要说的明白 1.1 克隆 git clone https://g ...

  8. JS基础_数据类型-Boolean类型

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. Bat批处理文件入门

    这个东西吧,感觉在使用windows时作用不是很大,毕竟在windows环境下命令行确实用的比较少,但有时候也会用到,比如测试算法程序时使用批处理+文件可以省去每次手动输入.赶巧最近对批处理也比较感兴 ...

  10. O010、动手实践虚拟网络

    参考https://www.cnblogs.com/CloudMan6/p/5296573.html   本节将演示如何在实验环境中实现下图所示的虚拟网络