结合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. 使用 Elmah一些要注意的问题

    http://www.cnblogs.com/apsnet/archive/2012/04/28/2474730.html 1. Elmah使用后,在发布时,要区分IIS6和IIS7 ,IIS6下 H ...

  2. mysql 索引及其原理

    mysql 索引 KEY与INDEX的区别: KEY is something on the logical level, describes your table and database desi ...

  3. 在Razor中如何引入命名空间？（"import namespace in razor view"） 【转】

    原文链接 找了半天,原来如此: 在aspx中: <%@ Import Namespace = "Martian.Areas.SFC.Models" %><%@ I ...

  4. svn branch and merge（svn切换分支和合并）详解

    下文的实践主要是参考了TortoiseSVN的帮助文档和Subversion的在线文档,Subversion的在线文档:http://svnbook.red-bean.com/en/1.5/svn-b ...

  5. jQuery 遍历 - find() 方法

    实例 搜索所有段落中的后代 span 元素,并将其颜色设置为红色: $("p").find("span").css('color','red'); 详情:htt ...

  6. MobClick详解

    1.使用自定义事件 使用自定义事件功能请先在网站应用管理后台(设置->编辑自定义事件)中添加相应的自定义事件后,服务器才会对相应的自定义事件请求进行处理.这里我们将提供几个简单而通用的接口: 1 ...

  7. Linux服务器管理: 日志管理(一)

    1.日志管理介绍: a.日志服务:在CentOS6.x中日志服务以及由rsyslogd取代了原有的syslogd服务.rsyslogd日志服务更加先进,功能更多.但是不论该服务的使用,还是日子文件的格 ...

  8. Memcached存储命令 - add

    Memcached add 命令用于将 value(数据值) 存储在指定的 key(键) 中. 如果 add 的 key 已经存在,则不会更新数据,之前的值将仍然保持相同,并且您将获得响应 NOT_S ...

  9. seo与sem的关系和区别

    seo与sem仅有一个字母之差,而且两者和网站优化都有很大的关系,很多初学者往往会把这2个名称弄混,即使一些做了多年的seo,有时候也无法区分这两者之间到底有何不同. 首先,我们从定义上来区分:SEO ...

  10. IE6 Must Die

    最近 Twitter 上很多人在推一个名为 IE6 Must Die 的活动, 参与的朋友可以通过头像转换服务在自己的头像上加上一个禁止 IE6 的图标, 很是拉风. Internet Explore ...