结合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. this.name=name;和this.setName(name);的区别

    其实一般属性设置为private后,才会写属性的set和get方法 在本类中可以用 this.name=name 但是,在其他类中药给name赋值,就只能用set了

  2. codeforces 709B Checkpoints

    题目链接:http://codeforces.com/problemset/problem/709/B 题目大意: 第一行给出两个数 n,x.第二行 输入 n 个数. 要求:从x位置遍历 n-1 个位 ...

  3. C#--使用存储过程

    过程: 1.连接数据库 2.设置执行类型为存储过程,区别于SQL语句 3.得到执行结果,返回值.输出参数等 //连接数据库 string connstr = "Data Source=ZGC ...

  4. canvas入门（画圆）

    1.想在H5上画一个canvas,必须在页面上你需要的地方添加canvas标签, <canvas id="myCanvas"></canvas>   接着需 ...

  5. Mac安装Brew

    安装命令如下:curl -LsSf http://github.com/mxcl/homebrew/tarball/master | sudo tar xvz -C/usr/local --strip ...

  6. System.BadImageFormatException : 未能加载文件或程序集“Medici.PaymentRecover, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null”或它的某一个依赖项。试图加载格式不正确的程序。

    System.BadImageFormatException : 未能加载文件或程序集“xxxxx.xxxxx, Version=1.0.0.0, Culture=neutral, PublicKey ...

  7. mysql 查询表结构 查询索引

    首先进入到mysql里 show databases; 选择数据库 use xxxcms; 查询数据库下的表结构 show create table 表名; 这样看着不太好可以后面加\G show c ...

  8. CSS核心的几个概念

    盒模型.position.float.他们是css的基础,之间看似独立却又相辅相成. 元素类型 块级元素.内联元素 他们之间有以下区别: 1.块级元素独占一行,除非显示的修改display属性.而内联 ...

  9. springmvc的form标签

    1.要使用Spring MVC提供的表单标签,首先需要在视图页面添加: <%@ taglib prefix="form" uri="http://www.sprin ...

  10. c#之Redis队列在邮件提醒中的应用

    场景 有这样一个场景,一个邮件提醒的windows服务,获取所有开启邮件提醒的用户,循环获取这些用户的邮件,发送一条服务号消息.但问题来了,用户比较少的情况下,轮询一遍时间还能忍受,如果用户多了,那用 ...