1. <html>
  2. <head>
  3.     <meta charset="utf-8">
  4.     <title>d3研究室</title>
  5.     <style>
  6.        .h-bar{
  7.      height:15px;
  8.      background-color: chartreuse;
  9.      text-align: right;
  10.      border:solid 1px black;
  11.  }
  12.     </style>
  13. </head>
  14. <body>
  15. <script src="./d3.v3.min.js" charset="utf-8"></script>
  16. <script>
  18. var  data=[];
  19. for(var i=0;i<10;i++){
  20.     var obj={
  21.         width:Math.ceil(Math.random()*100),
  22.         color:Math.ceil(Math.random()*100)
  23.     };
  24.     data.push(obj);
  25. }
  26.   //创建映射，将0至100间的值线性映射成"#add8e6"到"blue"之间的颜色
  27.   var colorScale=d3.scale.linear()
  28.     .domain([0,100]).range(["#add8e6","blue"]);
  30. var render=function(){
  31.     //enter 计算数据与显示元素的差集，补充不足
  32.     d3.select("body").selectAll("div.h-bar")
  33.         .data(data)
  34.         .enter()
  35.         .append("div")
  36.         .attr("class",'h-bar')
  37.         .append("span");
  39.     //update 更新内容
  40.     d3.select("body").selectAll("div.h-bar")
  41.         .data(data)
  42.         .style("width",function(d,i){
  43.             return (d.width*3)+"px";
  44.         })
  45.         .style("background-color",function(d){
  46.             return colorScale(d.color);
  47.         })
  48.         .select("span")
  49.         .text(function(d){
  50.             return d.width;
  51.         });
  52.     //exit 删掉多于的元素
  53.     d3.select("body").selectAll("div.h-bar")
  54.         .data(data)
  55.         .exit()
  56.         .remove();
  57. };
  59. setInterval(function(){
  60.     data.shift();
  61.     var obj={
  62.         width:Math.ceil(Math.random()*100),
  63.         color:Math.ceil(Math.random()*100)
  64.     };
  65.     data.push(obj);
  66.     render();
  67. },1500);
  68. </script>
  69. </body>
  70. </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. 【剑指offer】近期公共祖先

    转载请注明出处:http://blog.csdn.net/ns_code/article/details/28113959 剑指offer上的最后一题了,一个递归函数调了一下午,才得到正确的结果. 题 ...

  2. Android监听SD卡文件变化

    今天再一次使用到FileObserver,上一次使用还是很久之前了.总结一下FileObserver里留的一些“坑”   1.FileObserver只能监听一个目录下的“一级”子文件,也就是说Fil ...

  3. SSL工作原理

    关键词:SSL,PKI,MAC 摘    要:SSL利用数据加密.身份验证和消息完整性验证机制,为基于TCP等可靠连接的应用层协议提供安全性保证.本文介绍了SSL的产生背景.安全机制.工作过程及典型组 ...

  4. javascript遍历数组

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  5. mydumper原理5

    前言 之前介绍了Oracle官方的多线程逻辑导入导出工具mysqlpump,但已经操作过的同学会发现其多线程的单位还是表,换句话说, 单表依然是 单线程导出 .网易早已使用mydumper/myloa ...

  6. mysqldump原理0

  7. objective-c对NSArray的学习

    转自:http://gekie.iteye.com/blog/1086256 NSARRAY简单的使用 定义数组,遍历数组: 1 2 3 4 5 6 7 8 NSArray *array; array ...

  8. Python学习 之 函数

    1.为什么要使用函数 (1)降低编程难度:将复杂的问题分解成简单的小问题 (2)代码重用 2.函数的定义 def 函数名(参数列表):#可以没有参数 函数体 3.函数缺省参数(默认参数):设置默认参数 ...

  9. iOS UIButton加在window上点击无效果问题

    UIButton加在window上,点击没有效果,找了很久,原来是没有加上这名:[self.window makeKeyAndVisible]; self.window = [[UIWindow al ...

  10. jquery 设置style:display 其实很方便的

    ("#id").css('display','none'); $("#id").css('display','block'); 或 $("#id&qu ...