<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. xcode 3.x版本中的Executables 到xcode 4.x中怎么找不到了？

    转自:http://zhidao.baidu.com/question/327868169.html 1 在Scheme处选择Edit Scheme 2 点击Run(Debug) 3 在Argumen ...

  2. 文件尾存在EOF吗？

    参考:http://bbs.csdn.net/topics/290027166 我們先一起來看看FILE是怎么定義的:   FILE                          <STDI ...

  3. Linux shell 脚本攻略之比较与测试

    摘自:<Linux shell 脚本攻略>Page30-33

  4. struts2.1笔记07：Sturts.xml配置中的包介绍

    1. 2.这里上面namespace作用是介绍: (1)如果<package>配置在struts1中如下: (2)同样的配置在struts2中如下:

  5. SQL Server:替换文本中的回车和换行符

    --替换回车符 update master_locationSET street_number = REPLACE(street_number, CHAR(13), '') --替换换行符 updat ...

  6. 移植最新u-boot（裁剪和修改默认参数）之韦东山笔记

    1.下载.建立source insight工程.编译.烧写.如果无运行分析原因 tar xjf u-boot-2012.04.01.tar.bz2 cd u-boot-2012.04.01 make ...

  7. webservice简单总结

    一:webservice定义 webservice是一种基于xml,xsd封装格式,通过http协议通信的一种服务,支持跨平台.跨语言的 远程调用. 二:webservice优点 1:跨平台,无论是w ...

  8. [改善Java代码]多线程使用Vector或HashTable

    Vector是ArrayList的多线程版本,HashTable是HashMap的多线程版本,这些概念我 们都很清楚,也被前辈嘱咐过很多次,但我们经常会逃避使用Vector和HashTable,因为用 ...

  9. 转 oracle 11g 导出空表

    1.Oracle11g默认对空表不分配segment,故使用exp导出Oracle11g数据库时,空表不会导出. 2.设置deferred_segment_creation 参数为FALSE后,无论是 ...

  10. saltstack实战3--配置管理之grains

    grains是什么 grains是minion服务启动后,采集的客户端的一些基本信息,硬件信息,软件信息,网络信息,软件版本等.你可以在minion上自定义一些grains信息. 它是静态的信息,mi ...