结合underscore-min.js，和D3.js 绘制HTML关键词随机分布

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="./js/jquery-1.8.3.min.js"></script>

<script type="text/javascript" src="./js/underscore.js"></script>

<script type="text/javascript" src="http://t.datastory.com.cn/resources/js/lib/d3.v3.min.js?version=0.2.22"></script>

<script type="text/javascript" src="http://t.datastory.com.cn/resources/js/lib/d3.layout.cloud.js?version=0.2.22"></script>

</head>

<body>

<div id="keywordDist" style="width:400px;height:280px;"></div>

</body>

</html>

<script>

//关键词分布

frepkeywordstat();

function frepkeywordstat(){

    if (!$.support.leadingWhitespace) {

        $("#keywordDist").html("请使用Chrome浏览器以获得最佳浏览体验");

        return;

    }

    var lvalues = [];

    var keyword = "泽泽$1|文晖$2";

    if(keyword && keyword.length){

        var ls = keyword.split("|");

        if(ls==null||ls.length<=0){

             $("#keywordDist").html('<div style="margin-top: 140px;margin-left: 180px;">暂无数据...</div>');

            return;

        }

        $.each(ls, function(key, value){

            var items = value.split("$");

            if(items==null||items.length<2){

                return true;

            }

            var p = {};

            if(items.length == 2){

                p.text = items[0];

                p.size = items[1];

                lvalues.push(p);

            }else if(items.length == 3){

                p.text = items[0];

                p.size = items[2];

                lvalues.push(p);

            }

            if(lvalues.length >= 25){

                return false;

            }

        });

        if(!lvalues.length){

            $("#keywordDist").html('<div style="margin-top: 140px;margin-left: 180px;">暂无数据...</div>');

            return;

        }

    }else{

        $("#keywordDist").html('<div style="margin-top: 140px;margin-left: 180px;">暂无数据...</div>');

        return;

    }

    lvalues = _.sortBy(lvalues, function(o1){return parseInt(o1.size)});

    var scale = d3.scale.linear()

        .domain([parseInt(lvalues[0].size), parseInt(lvalues[lvalues.length-1].size)])

        .range([20,45]);

    $("#keywordDist").html("");

    d3.layout.cloud().size([420, 280])

        .words(lvalues)

        .rotate(function() { return Math.ceil(Math.random()*40)-20; })

        .font("Impact")

        .fontSize(function(d) { return scale(parseInt(d.size))})

        .on("end", draw)

        .start();

}

function draw(words) {

    var fill = d3.scale.category20();

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

        .attr("width", 420)

        .attr("height", 280)

        .append("g")

        .attr("transform", "translate(200, 160)")

        .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, d.y] + ")rotate(" + d.rotate + ")";

        })

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

        .style("opacity", 1e-6)

        .transition()

        .duration(1000)

        .style("opacity", 1);

}

</script>

HTML页面关键词随机分布布局的更多相关文章

  1. 分布式存储数据库的Key的随机分布（RP）和顺序分布（OPP）

    在分布式存储数据库的世界中,无论是基于Key/Value的数据库还是Column Base(比如HBase)的数据库,都有一个重要的因子------Key,或者叫RowKey.我们总是根据Key来快速 ...

  2. 移动端页面开发适配 rem布局原理

    主题 HTML移动端页面开发适配 rem布局原理 什么是适配,为什么要适配 我们拿到的设计图一般是以640,750,1080分辨率为基准设计的,而现在的手机终端各式各样,分辨率不同,逻辑像素不同 ,适 ...

  3. 如是使用JS实现页面内容随机显示

    之前有个客户咨询我,因为他们公司的业务员有多个人,但公司网站的联系方式板块里只够放一个人的信息,所以就想能不能实现这个联系方式信息随机显示,对于业务或客服人员来说也能做到分配均匀公平.本文我们将和大家 ...

  4. 手机端页面自适应解决方案—rem布局进阶版

    手机端页面自适应解决方案—rem布局进阶版   https://www.jianshu.com/p/985d26b40199 注:本文转载之处:https://www.cnblogs.com/anni ...

  5. jQuery实现页面关键词高亮

    示例代码,关键位置做了注释,请查看代码: <html> <head> <title>jQuery实现页面关键词高亮</title> <style ...

  6. djb2：一个产生简单的随机分布的哈希函数

    目录 LCG算法 示例代码 djb2 示例代码 为什么选择参数33和 33 was chosen because: 5381 was chosen because 哈希选择参考 LCG算法 djb2与 ...

  7. 手机端页面自适应解决方案—rem布局（进阶版，附源码示例）

    转自:https://segmentfault.com/a/1190000007350680 一年前笔者写了一篇 <手机端页面自适应解决方案—rem布局>,意外受到很多朋友的关注和喜欢.但 ...

  8. ECSHOP热门搜索关键词随机显示

    实现ECSHOP热门搜索关键词随机显示,需要修改ECSHOP模板和ECShOP程序,按照步骤修改即可. 一.打开 include/lib_main.php 文件,找到下面这段代码,删除之(大概在165 ...

  9. eclipse重置页面恢复到最初布局状态

    eclipse重置页面恢复到最初布局状态 window->perspective->reset perspective

随机推荐

  1. 在项目中那个少用if else 语句，精简代码，便于维护的方法（1）

    一般我在写一个函数的时候,可能需要一个回调函数,例如: function loadQtipCode(dom, title, content, width, showcb, hidecb) { $(do ...

  2. Ecshop 单选按钮组功能 颜色多选

    效果: js代码: function changeAtt(t,src,key) { document.getElementById('spec_value_'+src).checked='checke ...

  3. UIAlertController 标题文字大小 颜色

    NSString *title = [NSString stringWithFormat:]; NSString *msg = @"\n把红包分享给微信好友,金额随机,可用于购买雪票和雪卡& ...

  4. curl毫秒超时使用的坑

    升级后的libcurl已经支持了毫米级别的超时.但是使用的时候还有一个坑需要注意跨过去 . libcurl如果检查到设置的timeout < 1s 那么会直接发出一个信号说 "已经超时 ...

  5. "Java 反序列化"过程远程命令执行漏洞

    一.漏洞描述   国外 FoxGlove 安全研究团队于2015年11月06日在其博客上公开了一篇关于常见 Java 应用如何利用反序列化操作进行远程命令执行的文章.原博文所提到的 Java 应用都使 ...

  6. Why you shouldn't use Entity Framework with Transactions

    Links EntityFramework This is a .net ORM Mapper Framework from Microsoft to help you talking with yo ...

  7. TableView的执行流程 & 位移枚举

    // 闲来无聊测试一下 第一轮: 1.numberOfSectionsInTableView    :假如section=2,此函数只执行一次,假如section=0,下面函数不执行,默认为1 2.h ...

  8. 工作中linux定时任务的设置及相关配置

    工作中会用到定时任务,来处理以前采集来的数据备份, 每周一凌晨4点执行一次    0 4 * * */1 find/data/templatecdr/oracle/dcndatabak/ -type ...

  9. Apache ab参数--压力测试

    Apache附带的ab,它非常容易使用,ab可以直接在Web服务器本地发起测试请求.这至关重要,因为我们希望测试的服务器的处理时间,而不包含数据的网络传输时间以及用户PC本地的计算时间. 需要清楚的是 ...

  10. java项目命名规范

    一.命名规范 1. 项目名全部小写 2. 包名全部小写 3. 类名首字母大写,如果类名由多个单词组成,每个单词的首字母都要大写. 如:public class MyFirstClass{} 4. 变量 ...