啥都不写了,都在实例中了。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.h-bar {
background: green;
margin-top: 5px;
color: "#000";
}
</style>
<script type="text/javascript" src="/angularJs/js/d3_v2.js"></script>
<script type="text/javascript">
var data = [
{width:10,color:23},
{width:15,color:33},
{width:30,color:40},
{width:50,color:60},
{width:80,color:22},
{width:65,color:10},
{width:55,color:5},
{width:30,color:30},
{width:20,color:60},
{width:10,color:90},
{width:8,color:10}
];
//随机获取一定范围的颜色值
var colorScale = d3.scale.linear().domain([0,100]).range(["#add8e6","blue"]);
function render(data){
//enter
d3.select("body").selectAll("div.h-bar")
.data(data)
.enter() //把没有绑定图片的数据全部选择出来(进行图片的绑定)
//just only data
.append("div")
.attr("class","h-bar")
.append("span");
//更新
d3.select("body").selectAll("div.h-bar")
.data(data)
.attr("class","h-bar")
.style("width",function(d){
return (d.width + 5) + "px";
})
.style("background-color",function(d){
return colorScale(d.color);
})
.select("span")
.text(function(d){
return d.width;
})
//退出
d3.select("body").selectAll("div.h-bar")
.data(data)
.exit() //把没有绑定数据的图片选择出来
//just only image
.remove();
}
function randomValue(){
return Math.round(Math.random() * 100);
}
//每隔1.5s调用
setInterval(function(){
data.shift();//更改数据,去掉数组的第一个元素
//更改数据,给数组末尾添加一个随机的数据
data.push({width:randomValue(),color:randomValue()});
render(data);
},1500);
render(data);
</script>
</head>
<body>
</body>
</html>
分享到:
相关推荐
NULL 博文链接:https://supanccy2013.iteye.com/blog/2217639
NULL 博文链接:https://supanccy2013.iteye.com/blog/2217687
3D-d3-force-3d.zip,使用速度verlet积分在1d、2d或3d中强制定向图形布局。,3D建模使用专门的软件来创建物理对象的数字模型。它是3D计算机图形的一个方面,用于视频游戏,3D打印和VR,以及其他应用程序。
d3-relationshipgraph, 使用d3js可视化父对象关系的框架 d3-relationshipgraph 用于创建 D3.js的父级子关系的框架。示例在这里查看一个工作示例 。如果你已经使用 d3-relationshipgraph,可以编辑这个自述文件并为你...
D3-Tips-and-Tricks-Latest.pdf 最新版D3.js技法与教程,使用D3引擎进行前端数据可视化,一步一步学习D3的可视化编程
前端项目-d3-tip,Tooltips for d3 svg visualizations
大洋D3-Edit2.81安装Win7_X64补丁
前端项目-d3-interpolate,插入数字、颜色、字符串、数组、对象等等!
使用d3-force、d3-zoom、d3-drag绘制的图像,加入了概览图效果,支持放大缩小、移动、快速定位
前端项目-d3-composite-projections,像阿尔伯苏预测一样,增加了几个D3预测,以显示离大陆较远的国家靠近它。
d3-timeline, 用于d3的简单JS时间轴插件 #d3-timeline 一个简单的d3时间线插件。获取类似于 对于看起来像var testData = [ {label: "person a", times: [ {"starting_time": 1355
3D-d3-octree.zip,三维递归空间细分。,3D建模使用专门的软件来创建物理对象的数字模型。它是3D计算机图形的一个方面,用于视频游戏,3D打印和VR,以及其他应用程序。
那些是: 全局 d3.event 已被删除从现在开始,每个事件处理程序都将接收事件作为第一个参数位于此存储库下的 d3-tip 版本已适应此更改。 它还修复了一个恼人的错误,当多个 DOM 提示实例被创建时,这最终会导致意外...
前端项目-d3-hierarchy,层次数据可视化布局算法。
前端开源库-d3-interpolate-pathd3插补路径,插补路径
如果使用NPM,则npm install d3-geo-projection 。 否则,请下载。 您也可以直接从作为加载。 支持AMD,CommonJS和香草环境。 在香草中,将导出d3全局变量: < script src =" ...
D3型非接触式IC卡读写器(D3-U)剑龙系列中D3型是一款简单易用的M1卡专用读写器,可读写Mifare S50,采用了D8的核心技术,通过RS232串口或USB口实现同PC机及相关设备的连接,USB采用无驱技术。具有更简单、稳定和低...
前端项目-d3-transition,D3选项的动画转换。
D3-Tips-and-Tricks_Book