D3.js-数值自动变动的条形图表
开始停止
<p>
<style><!--
button{
background-color:#aaaaaa;
font-family:微软雅黑;
font-size:12px;
color:#ffffff;
width:50px;
height:30px;
}
button:hover{
background-color:#6482F7;
color:#ff0000;
}
#container{
background:#9a9a9a;
width:50%;
height:280px;
padding:0px 10px;
margin:0px;
}
div.hbar{
background-color:#3EA35F;
margin:5px;
}
div.hbar span{
color:#ffffff;
font-family:微软雅黑;
font-size:10px;
margin-left:10px;
}
--></style>
<button onclick="int=setInterval(myTimer,1000)">开始</button><button onclick="int=window.clearInterval(int)">停止</button>
<div id="container"></div>
<p>
<script type="text/javascript" src="http://files.cnblogs.com/files/alexywt/d3.js"></script>
<script type="text/javascript">// <![CDATA[
var data=[10,15,30,50,80,65,55,30,20,10,8];
function render(){
d3.select("#container").selectAll("div.hbar").data(data)
.enter().append("div").attr("class","hbar").append("span");
d3.select("#container").selectAll("div.hbar").data(data)
.style("width",function(d){return (d*3)+"px";}).select("span").text(function(d){return d;});
d3.select("#container").selectAll("div.hbar").data(data)
.exit().remove();
}
function myTimer(){
data.shift();
data.push(Math.round(Math.random()*100));
render(data);
}
var int=setInterval(myTimer,1000);
render(data);
// ]]></script>
</p>
D3.js-数值自动变动的条形图表的更多相关文章
- 【 D3.js 入门系列 --- 2 】 如何使用数据和选择元素
接着上一讲的内容,这次讨论如何选择元素和使用数据. 现在页面中有三行文字,代码为: <p>Hello World 1</p> <p>Hello World 2 ...
- d3.js 实现立体柱图
前言 随着大数据时代的来临,数据可视化的重要性也越来越凸显,那么今天就基于d3.js今天给大家带来可视化基础图表柱图进阶:立体柱图 关于d3.js d3.js是一个操作svg的图表库,d3封装了图表的 ...
- 【 D3.js 入门系列 --- 3 】 做一个简单的图表!
前面说了几节,都是对文字进行处理,这一节中将用 D3.js 做一个简单的柱形图. 做柱形图有很多种方法,比如用 HTML 的 div 标签,或用 svg . 推荐用 SVG 来做各种图形.SVG 意为 ...
- 发现一款比echarts更牛B,效果更炫的图表组件 d3.js
每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code d3.js ,能制作更加复杂的图表 https://github.com/d3/d3 ...
- d3.js制作条形时间范围选择器
此文章为原创文章,原文地址:https://www.cnblogs.com/eagle1098/p/12146688.html 效果如上图所示. 本项目使用主要d3.js v4制作,可以用来选择两年的 ...
- d3.js制作连线动画图和编辑器
此文章为原创文章,原文地址:https://www.cnblogs.com/eagle1098/p/11431679.html 连线动画图 编辑器 效果如上图所示.本项目使用主要d3.jsv4制作,分 ...
- 【 D3.js 高级系列 — 5.0 】 颜色
颜色是作图不可少的概念,常用的标准有 RGB 和 HSL,D3 提供了创建颜色对象的方法,能够相互转换和插值. RGB色彩模式是通过对红(Red).绿(Green).蓝(Blue)三个颜色通道相互叠加 ...
- 【 D3.js 选择集与数据详解 — 5 】 处理模板的应用
在[选择集与数据 - 4]一文中,介绍了一个update.enter.exit的处理模板,这个模板很常用,本文将通过一个例子来讲解其使用方法. 1. 模板 复习一下上一章提到的模板. //绑定数据后, ...
- 使用JavaScript和D3.js实现数据可视化
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由独木桥先生发表于云+社区专栏 介绍 D3.js是一个JavaScript库.它的全称是Data-Driven Documents(数据 ...
随机推荐
- Kickstart Practice Round 2017 Google
Problem B. Vote A and B are the only two candidates competing in a certain election. We know from po ...
- php微信网页授权获取用户信息
配置回调域名: 1. 引导用户进入授权页面同意授权,获取code 2. 通过code换取网页授权access_token(与基础支持中的access_token不同) 3. 如果需要,开发者可以刷新网 ...
- (Jquery)避免数据相加小数点后产生多位数和计算精度损失
/** * 加法运算,避免数据相加小数点后产生多位数和计算精度损失. * * @param num1加数1 | num2加数2 */ function numAdd(num1, num2) { var ...
- js拉起或下载app
产品提了个需求,通过手机网页判断是否安装了自己公司app,如果安装了则拉起app,没有安装则跳转到下载页. 经过各种查阅资料尝试总结了一个还算可以的办法. 拉起app的原理就是js和原生统一好一个地址 ...
- 【PHP系列】PHP推荐标准之PSR-1,PSR-2
说起码代码,刚上大学那会,老师就教导我们,要严格,规范的,把代码写好.代码如人,工工整整.提起规范化的代码,从一开始用命令行编辑C语言代码就开始控制,强制自己按照相关的标准来,所以,现在写代码,不规范 ...
- Jemter性能测试
Jmeter 介绍 Jmeter 是一款使用Java开发的,开源免费的,测试工具, 主要用来做功能测试和性能测试(压力测试/负载测试). 而且用Jmeter 来测试 Restful API, 非常好 ...
- 记一个Java错误 1 -- Unsupported major.minor version 52.0
今天打开ADT eclipse 准备调试上周的安卓项目, 发现总是报错 如图: 百度了一下说是 jdk版本过低的问题 (低版本的jre运行高版本project) 于是就修改了一下 window - ...
- 【《Effective C#》提炼总结】提高Unity中C#代码质量的21条准则
作者:Williammao, 腾讯移动客户端开发工程师 商业转载请联系腾讯WeTest获得授权,非商业转载请注明出处. 原文链接:http://wetest.qq.com/lab/view/290.h ...
- The Art of Prolog:Advanced Programming Techniques【译文】
申明:此文为译文,仅供学习交流试用,请勿用作商业用途,造成一切后果本人概不负责,转载请说明.本人英语功力尚浅,翻译大多借助于翻译工具,如有失误,欢迎指正. 逻辑程序简介 逻辑程序是一组公理或规则,定义 ...
- 3631: [JLOI2014]松鼠的新家
3631: [JLOI2014]松鼠的新家 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 707 Solved: 342[Submit][Statu ...