<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. ClassLoader使用记录《安卓高手之路》

    我不喜欢那些泛泛而谈的去讲那些形而上学的道理,更不喜欢记那些既定的东西.靠记忆去弥补思考的人,容易陷入人云亦云的境地,最后必定被记忆所围困,而最终消亡的是创造力.希望这个高手之路系列能够记录我学习安卓 ...

  2. 进程间通信之XSI IPC

    XSI IPC源自于系统V的IPC功能. 有三种IPC我们称作XSI IPC,即消息队列.信号量以及共享存储器,它们之间有很多相似之处. 1.标识符和键 每个内核中的IPC结构(消息队列.信号量或共享 ...

  3. TFS服务器(微软源代码管理服务器)上彻底删除项目

    在TFS服务器上建立了很多项目,发现在Team Explorer中,只能移除团队项目,这种移除,只是将项目从当前Team Explorer项目列表中删除,下一次Connect到TFS服务器时,或者刷新 ...

  4. cocos2dx libjson

    libjson下载 http://sourceforge.net/projects/libjson/ 下载解压后改名成libjson,用到的是根目录下面的JSONOptions.h.libjson.h ...

  5. php使用技巧--之链接地址

    高效PHP程序必知的53个技巧 http://developer.51cto.com/art/201105/265953.htm 非常实用 十个PHP高级应用技巧 http://developer.5 ...

  6. SSIS 学习（6）：包配置（上）【转】

    Integrartion Services 包实际上就是一个对象属性的集合,在前面我们开发的所有 Integration Services包,其中的变量.属性,比如:数据库链接.同步文件目录等,我们都 ...

  7. linux 基本命令 [转]

    linux 基本命令 1.ls  (list 显示当前目录下文件和目录 ls -l 详细显示 =ll ) [root@linux ~]# ls [-aAdfFhilRS] 目录名称 [root@lin ...

  8. C++之类的构造函数，不得不学明白的重点

    一.认识构造函数 当创建一个类类型对象时,类通过一个或者几个特殊的成员函数来控制对象的初始化,这种函数就是构造函数.它的任务就是用来初始化类对象的成员的,所以当创建类对象或者类对象被创建就会调用构造函 ...

  9. zabbix电话告警V1

    最近决定将夜班值班人员取消,夜里告警采用机器人电话通知.总结一下这么几个情况,有问题还请指出,希望也能给大家多一个思路. V1做的太糙了,预计年初上V2 一.用谁家的服务 费用我没有太关注,主要就是看 ...

  10. TortoiseGit无法勾选Load Putty Key，该选项为灰色的解决办法

    1.软件版本 Git版本:Git-1.9.0-preview20140217.exe TortoiseGit:TortoiseGit-1.8.8.0-64bit.msi     2.出现问题 使用右键 ...