<html>

<head>

    <meta charset="utf-8">

    <title>d3研究室</title>

    <style>

       .h-bar{

     height:15px;

     background-color: chartreuse;

     text-align: right;

     border:solid 1px black;

 }

    </style>

</head>

<body>

<script src="./d3.v3.min.js" charset="utf-8"></script>

<script>

var  data=[];

for(var i=0;i<10;i++){

    var obj={

        width:Math.ceil(Math.random()*100),

        color:Math.ceil(Math.random()*100)

    };

    data.push(obj);

}

  //创建映射，将0至100间的值线性映射成"#add8e6"到"blue"之间的颜色

  var colorScale=d3.scale.linear()

    .domain([0,100]).range(["#add8e6","blue"]);

var render=function(){

    //enter 计算数据与显示元素的差集，补充不足

    d3.select("body").selectAll("div.h-bar")

        .data(data)

        .enter()

        .append("div")

        .attr("class",'h-bar')

        .append("span");

    //update 更新内容

    d3.select("body").selectAll("div.h-bar")

        .data(data)

        .style("width",function(d,i){

            return (d.width*3)+"px";

        })

        .style("background-color",function(d){

            return colorScale(d.color);

        })

        .select("span")

        .text(function(d){

            return d.width;

        });

    //exit 删掉多于的元素

    d3.select("body").selectAll("div.h-bar")

        .data(data)

        .exit()

        .remove();

};

setInterval(function(){

    data.shift();

    var obj={

        width:Math.ceil(Math.random()*100),

        color:Math.ceil(Math.random()*100)

    };

    data.push(obj);

    render();

},1500);

</script>

</body>

</html>

d3 之值域映射的更多相关文章

  1. D3序

    最近做公司的APM项目涉及到数据可视化,简单调研了一下目前业内推崇的工具,自然最终选择是非D3莫属,特别是看了官网上那些绝妙的示例之后,感觉这玩意儿炫到爆!选择D3最重要的一点是D3提供基础的必要的功 ...

  2. d3.js制作条形时间范围选择器

    此文章为原创文章,原文地址:https://www.cnblogs.com/eagle1098/p/12146688.html 效果如上图所示. 本项目使用主要d3.js v4制作,可以用来选择两年的 ...

  3. 【D3】D3词汇表

    按字母顺序 axis:数轴或坐标轴表示两个维度上数据尺度的直线 bar chart:条形图 (参见Excel)以矩形宽度反映数值大小的图表形式 bar:条形以宽度反映数值大小的矩形(rect) bin ...

  4. 前端学HTTP之字符集

    前面的话 HTTP报文中可以承载以任何语言表示的内容,就像它能承载图像.影片或任何类型的媒体那样.对HTTP来说,实体主体只是二进制信息的容器而已.为了支持国际性内容,服务器需要告知客户端每个文档的字 ...

  5. 全球分布式数据库：Google Spanner（论文翻译）

    本文由厦门大学计算机系教师林子雨翻译,翻译质量很高,本人只对极少数翻译得不太恰当的地方进行了修改. [摘要]:Spanner 是谷歌公司研发的.可扩展的.多版本.全球分布式.同步复制数据库.它是第一个 ...

  6. 细品 - 逻辑回归（LR）

    1. LR的直观表述 1.1 直观表述 今天我们来深入了解一个人见人爱,花见花开,工业界为之疯狂,学术界..额,好像学术界用的不多哎.不过没关系,就算学术界用的不多也遮不住它NB的光芒,它就是LR模型 ...

  7. 在Microsoft Power BI中创建地图的10种方法

    今天,我们来简单聊一聊“地图”. 在我们日常生活中,地图地位已经提升的越来越高,出门聚餐.驾驶.坐车.旅行......应运而生的就是各种Map APP. 作为数据分析师,我们今天不讲生活地图,要跟大家 ...

  8. Google Spanner (中文版)

    温馨提示:本论文由厦门大学计算机系林子雨翻译自英文论文,转载请注明出处,仅用于学习交流,请勿用于商业用途. [本文翻译的原始出处:厦门大学计算机系数据库实验室网站林子雨老师的云数据库技术资料专区htt ...

  9. 图解一致性hash算法和实现

    更多内容,欢迎关注微信公众号:全菜工程师小辉.公众号回复关键词,领取免费学习资料. 一致性hash算法是什么? 一致性hash算法,是麻省理工学院1997年提出的一种算法,目前主要应用于分布式缓存当中 ...

随机推荐

  1. POJ 3026 Borg Maze

    Borg Maze Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 7998   Accepted: 2675 Descrip ...

  2. X64 Win7（win2008）连接SqlServer2005慢的解决办法

    问题描述:数据库版本:SQL SERVER 2005数据库安装环境: Win 2003 X64 客户端环境:Win 2008 x64连接工具:ODBC或ado.net测试连接时间:4-6秒 客户端环境 ...

  3. TCP/IP协议知识科普

    简介 本文主要介绍了工作中常用的TCP/IP对应协议栈相关基础知识,科普文. 本博客所有文章:http://www.cnblogs.com/xuanku/p/index.html TCP/IP网络协议 ...

  4. UNIX基础知识之用户标识

    一.用户ID 口令文件(/etc/passwd)登录项中的用户ID(user ID)是个数值,它向系统标识各个不同的用户.系统管理员在确定一个用户的登录名的同时,确定其用户ID.用户不能更改其用户ID ...

  5. PHP 正则表达式语法

    则表达式简介 在某些应用中,往往有时候需要根据一定的规则来匹配(查找)确认一些字符串,如要求用户输入的 QQ 号码为数字且至少 5 位.用于描述这些规则的工具就是正则表达式. 最简单的匹配 最简单的匹 ...

  6. Bitmap 多语言实现及应用

    http://blog.studygolang.com/2014/09/bitmap_multi_language/

  7. Linux内核初始化定义

    转载:http://blog.csdn.net/beatbean/article/details/8448623 1. Compile宏控制 位于include/linux/init.h /* The ...

  8. SingletonBeanRegistry

    // 给定一个存在的object对象,该Registry将它存储为一个单例的根据给定的beanName(给定的object已经完全初始化完成,在访问Registry的单例object时应该是同步的)v ...

  9. envi中selected rgb bands contain different spatial sizes

    是选择了不同的影像文件envi中selected rgb bands contain different spatial sizes

  10. Xcode 只有iOS device一个选项的解决办法

    下载了一个demo准备研究发现只有iOS device,没有其他的机型可选,解决方法比较简单,调下iOS SDK就行了