<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. [MODx] 2. Install some useful packages into ur MODx

    1. The package we might need: 2. Install the package: Select Installer Download Extras Install the p ...

  2. android UI进阶之实现listview的下拉加载

    关于listview的操作五花八门,有下拉刷新,分级显示,分页列表,逐页加载等,以后会陆续和大家分享这些技术,今天讲下下拉加载这个功能的实现. 最初的下拉加载应该是ios上的效果,现在很多应用如新浪微 ...

  3. ios开发——面试篇C语言精华

    面试篇C语言精华    1.面向过程:分析解决问题所需要的步骤,然后用函数把这些步骤一步一步实 现. 面向对象:直接描述客观世界的对象及其相互关系.现实世界中任何实体都 可以看作是对象,对象之间通过消 ...

  4. 日志分析(三) kibana数据展示

    kibana最新版本支持自定义数据大盘了,今天试用了下,感觉非常棒.上图: 支持多维度定义视图,然后视图里面可以依据粗粒度维度进行图表归类.总之,比旧版本强大太多了.后面试试能否扩展加入耦合一定业务数 ...

  5. php编程中容易忽略的地方

    一:fopen ( string $filename , string $mode [, bool $use_include_path = false [, resource $context ]] ...

  6. Code the Tree

    Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 2292   Accepted: 878 Description A tree ...

  7. css笔记14：css文件之间可以相互引用

    css文件之间相互引用是通过@import指令完成的 格式: @import  url("被引用的css文件"); 顺便说一句,如果希望在html或者php文件中引用某个xxx.c ...

  8. Java线程池--ThreadPoolExecutor

    一.线程池的处理流程 向线程池提交一个任务后,它的主要处理流程如下图所示: 一个线程从被提交(submit)到执行共经历以下流程: 线程池判断核心线程池里的线程是否都在执行任务,如果不是,则创建一个新 ...

  9. centos 安装ss-QT5

    方法一(DNF指令): 1.如果未安装DNF,请跳转至:http://dev.fjuts.com:83/blog/index.PHP/Linux/261.html2.添加shadowsocks 的 c ...

  10. Linux 命令 - ls: 列出目录内容

    ls 命令很可能是用户最常使用的命令,通过 ls 命名可以查看目录内容,确定各种重要文件和目录的属性. 命令格式 ls [OPTION]... [FILE]... 命令参数 -a, --all 列出所 ...