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设备驱动归纳总结（十一）：写个简单的看门狗驱动

    linux设备驱动归纳总结(十一):写个简单的看门狗驱动 xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx ...

  2. spring data 返回任意字段

    在spring boot + spring data查询数据库的过程中,有时候总会出现一些复杂的查询,我们希望数据库返回的字段能随意改变.这个需求在mybatis里很好解决,只需要用map接收就可以, ...

  3. 天勤考研数据结构笔记—栈的C语言实现

    栈的基本概念 栈的定义:栈是一种只能在一端进行插入或删除操作的线性表.其中允许进行插入或删除的一端称为栈顶(top).栈顶是由一个称为栈顶指针的位置指示器(其实就是一个变量,对于顺序栈,就是数组索引, ...

  4. KMP（next数组的更新理解）Codeforces Round #578 (Div. 2)--Compress Words

    题目链接:https://codeforc.es/contest/1200/problem/E 题意: 有n串字符串,让你连起来:sample please ease in out   ---> ...

  5. Django基础之视图(views)层、模板层

    目录 Django基础之视图(views)层.模板层 JsonResponse 向前端返回一个json格式字符串的两种方式 重写Django中的json的某个方法 form表单上传文件 FBV与CBV ...

  6. JAVA break、continue和return的区别

    控制跳转:continue和break的区别,以为return Continue在循环中使用,一般在for中使用 Break:跳出单重循环,常和switch搭配使用. 效果区别 Break的结果如下: ...

  7. rabbitmq中关于exchange模式type报错

    channel.exchange_declare(exchange='logs', type='fanout') 报错: Traceback (most recent call last):  Fil ...

  8. 安装docker私有仓库

    先安装docker:http://www.cnblogs.com/cjsblogs/p/8717304.html 安装私有仓库 #下载registry docker pull registry #制作 ...

  9. php和java语法区别

    Java和PHP的基本语法基本相同,其实大部分的语言的基本语法也都相同,但是他们还是有一些细微的区别: 1.PHP是一种脚本语言,代码在服务器上执行,而结果以纯文本返回浏览器. 2.PHP能够运行在各 ...

  10. SAP模块一句话入门(专业术语的理解)

    SAP模块一句话入门(专业术语的理解) SAP一句话入门:Financial & Controlling Accounting (FICO) 财务,财务,呵呵,让我们关心一下给我发工资的部门. ...