结合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. Java引用机制——reference

    所谓引用传递就是指将堆内存空间的使用权交给多个栈内存空间. 例子<1> public class Aliasing { int temp = 30; public static void ...

  2. fileinput模块

    刚才练习的时候,报如下错误: AttributeError: module 'fileinput' has no attribute 'input',后来Google参考这篇文章https://mai ...

  3. C#和SQL实现的字符串相似度计算代码分享

    http://www.jb51.net/article/55941.htm C#实现: 复制代码 代码如下: #region 计算字符串相似度        /// <summary>   ...

  4. Saltstack pillar组件

     pillar组件 pillar也是Saltstack最重要的组件之一,其作用是定义与被控主机相关的任何数据,定义好的数据可以被其他组件使用,如模板.state.API等.在pillar中定义的数据与 ...

  5. HBase命令(三) -- 增删改查

    新增 //语法:put <table>,<rowkey>,<family:column>,<value>,<timestamp> //新增或 ...

  6. asp.net mvc @Html.Partial @Html.Action @Html.RenderPartial @Html.RenderAction区别

    转载自 :  <asp.net mvc @Html.Partial @Html.Action @Html.RenderPartial @Html.RenderAction区别> 先复制过来 ...

  7. Orchard源码分析（4.4）：Orchard.Caching.CacheModule类

    概述 CacheModule也是一个Autofac模块.   一.CacheModule类 CacheModule将DefaultCacheManager注册为ICacheManager:       ...

  8. android控件库(1)-带删除功能的EditText

    DJEditText.java /** * Created by xp.chen on 2016/11/25. */ public class DJEditText extends AppCompat ...

  9. git执行pull命令时，报错

    在图形界面中,执行拉取操作时,出现下面的错误. You asked to pull from the remote 'origin', but did not specifya branch. Bec ...

  10. php/js获取客户端mac地址的实现代码

    这篇文章主要介绍了如何在php与js中分别获取客户度mac地址的方法,需要的朋友可以参考下   废话不多讲,直接上代码吧! 复制代码 代码如下: <?php   class MacAddr {  ...