D3对数据和图片的处理规则:
操作对象:数据集合 + 图片集合
操作名称: 进入,更新,退出。
进入:选择出来没有绑定图片的数据。
更新:选择已经绑定图片和数据的集合。
退出:选择没有绑定数据的图片。
下面是实例,各种注意在注释中已经表明。
<!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 = [12,22,23,34,55,64,53,23];
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) //把绑定的所有数据和图片选择出来进行图片宽度的改变
//both data + image
.style("width",function(d){
return (d*3) + "px";
})
.select("span")
.text(function(d){
return d;
})
//退出
d3.select("body").selectAll("div.h-bar")
.data(data)
.exit() //把没有绑定数据的图片选择出来
//just only image
.remove();
}
//每隔1.5s调用
setInterval(function(){
data.shift();//更改数据,去掉数组的第一个元素
//更改数据,给数组末尾添加一个随机的数据
data.push(Math.round(Math.random() * 100));
render(data);
},1500);
render(data);
</script>
</head>
<body>
</body>
</html>
分享到:
相关推荐
NULL 博文链接:https://supanccy2013.iteye.com/blog/2217687
3D-d3-force-3d.zip,使用速度verlet积分在1d、2d或3d中强制定向图形布局。,3D建模使用专门的软件来创建物理对象的数字模型。它是3D计算机图形的一个方面,用于视频游戏,3D打印和VR,以及其他应用程序。
大洋D3-Edit2.81安装Win7_X64补丁
D3-Tips-and-Tricks-Latest.pdf 最新版D3.js技法与教程,使用D3引擎进行前端数据可视化,一步一步学习D3的可视化编程
前端项目-d3-tip,Tooltips for d3 svg visualizations
使用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
d3-relationshipgraph, 使用d3js可视化父对象关系的框架 d3-relationshipgraph 用于创建 D3.js的父级子关系的框架。示例在这里查看一个工作示例 。如果你已经使用 d3-relationshipgraph,可以编辑这个自述文件并为你...
那些是: 全局 d3.event 已被删除从现在开始,每个事件处理程序都将接收事件作为第一个参数位于此存储库下的 d3-tip 版本已适应此更改。 它还修复了一个恼人的错误,当多个 DOM 提示实例被创建时,这最终会导致意外...
前端项目-d3-hierarchy,层次数据可视化布局算法。
3D-d3-octree.zip,三维递归空间细分。,3D建模使用专门的软件来创建物理对象的数字模型。它是3D计算机图形的一个方面,用于视频游戏,3D打印和VR,以及其他应用程序。
前端开源库-d3-interpolate-pathd3插补路径,插补路径
d3-sankey-circular d3-sankey库( )的分支,以允许循环链接(,循环图,如)。 该库包含来自Colin Fergus的bl.ock 的一部分代码,用于检测循环链接。 安装 如果使用NPM,则npm install d3-sankey-circular 。 ...
前端项目-d3-interpolate,插入数字、颜色、字符串、数组、对象等等!
D3-Tips-and-Tricks_Book
D3型非接触式IC卡读写器(D3-U)剑龙系列中D3型是一款简单易用的M1卡专用读写器,可读写Mifare S50,采用了D8的核心技术,通过RS232串口或USB口实现同PC机及相关设备的连接,USB采用无驱技术。具有更简单、稳定和低...
前端项目-d3-transition,D3选项的动画转换。