结合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. ubuntu下JDK的安装

    硬盘上有下载好的JDK,直接解压后配置profile环境变量就行 export JAVA_HOME=/usr/lib/jvm/java-8-oracle export JRE_HOME=${JAVA_ ...

  2. 使用github和hexo搭建博客

    title: How to build your blog by Hexo in github Welcome to huihuang's blog,you will find what you ex ...

  3. Which hashing algorithm is best for uniqueness and speed?

    http://programmers.stackexchange.com/questions/49550/which-hashing-algorithm-is-best-for-uniqueness- ...

  4. CMake安装（linux）

    环境:CentOS6.5 1.下载网址: http://www.cmake.org/download/ (选择linux版本,编译安装) 2.安装 # tar zxvf cmake-.tar.gz # ...

  5. C# WinForm中将Form显示在Panel中(C#)

    信息来自:http://blog.csdn.net/renyouprince/article/details/4136176 当我们在做WinForm的程序时,总是要弹出一些窗体,但弹出窗体看起来效果 ...

  6. GoLang之基础

    GoLang之基础 Go是一种并发的.带垃圾回收的.快速编译的语言. 经典的"hello world"入门: package main import "fmt" ...

  7. 集合 ArrayList

    /* * 功能:演示java集合的用法:ArrayList */ package com.jihe; //先引入一个包 import java.util.ArrayList; public class ...

  8. [工具]json转类

    摘要 这周在园子看到一篇介绍JsonCSharpClassGenerator这个工具的文章,感觉挺实用的,在现在项目中json用的是最多的,所以在转换对应的类的时候,确实挺频繁,所以就研究了一下这个工 ...

  9. 【8-17】HTML测试

    Source : http://www.w3school.com.cn/html HTML 测验 结果:9/20 您的回答: 1.HTML 指的是? 您的回答:超文本标记语言(Hyper Text M ...

  10. redis php扩展安装下载

    php的redis 扩展下载地址 Windows :http://windows.php.net/downloads/pecl/releases/redis/2.2.7/ 下载对应版本,一般有两个 n ...