如果你把函数绑定给图片，那么d3会自动调用这个函数。啥都不说了，都在例子中了。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.v-bar {
min-height: 1px;
min-width: 30px;
background-color: #4682b4;
margin-right: 2px;
font-size: 10px;
color: #f0f8ff;
text-align: center;
width: 10px;
display: inline-block;
}
</style>
<script type="text/javascript" src="/angularJs/js/d3_v2.js"></script>
<script type="text/javascript">
//定义全局变量data，每次调用render对这个data
//进行操作（增加数据，删除数据等
var data = [];
var next = function(x){
return 15 + x*x;
};
var newData = function(){
data.push(next);
return data;
}
function render(){
//第一：选中container下面的所有div（尽管这时还没有div）
//第二：调用data(new newData)进行数据与图形绑定。
//第三：注意此时进行绑定的不是直接的数据而是newData方法
//D3框架如果看到绑定的不是数据，而是函数，d3会自动
//调用这个函数，当前这个函数一定是会返回数据的函数
//每次调用render函数，就会自动调用newDate函数
var selection = d3.select("#container").selectAll("div").data(newData);
//给没有绑定图片的数据，添加图片样式
selection.enter().append("div").append("span");
//给没有绑定数据的图片样式删掉
selection.exit().remove();
//更新已经绑定数据图片的数据(更新他们的高度，和span张的文字)
selection.attr("class","v-bar")
.style("height",function(d,i){ //特别注意这里的参数d是一个函数
return d(i) + "px";
})
.select("span").text(function(d,i){
return d(i);
});
}
//每隔1500毫秒调用render函数
setInterval(function(){
render();
},1500);
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
分享到：
相关推荐
- **进入-更新-退出（Enter-Update-Exit）模式**：这是D3处理数据变化的标准模式，用于添加、修改和删除DOM元素。 - **转换（Transitions）**：用于平滑地改变元素属性，创建动画效果。 - **尺度（Scales）**：将...
3. **数据进入、更新和退出（Enter, Update, Exit）** 这是D3.js处理动态数据流的关键机制。当数据发生变化时，`enter()`, `update()`, `exit()`模式确保元素与数据之间的一致性。新数据对应元素进入，已存在的数据...
D3.js，全名Data-Driven Documents，是由Mike Bostock开发的一款强大的JavaScript库，用于在...在这个例子中，你可以期待看到一个清晰的演示，如何利用D3.js将数据与图形元素关联，并动态地根据数据变化更新视觉表示。
3. **进入、更新、退出机制**：掌握D3的enter()、update()和exit()模式，用于动态地添加、修改和删除SVG元素。 4. **绘制图形**：学习如何使用D3的几何变换和形状生成函数，如`rect()`, `circle()`, `line()`等来...
4. **进入-更新-退出模式**：D3.js的这一机制使得在数据改变时，可以高效地添加、修改和移除SVG元素，从而实现动态更新。 5. **过渡和动画**：`d3.transition()` 用于创建平滑的动画效果，通过设置持续时间和属性...
题目中提到的数据结构(D,R)是一个有向图的例子，其中顶点集合D = {d1, d2, d3, d4}，边集合R = {(d4,d3), (d3,d2), (d2,d1)}。根据图论的画法惯例，这个逻辑结构可以通过绘制节点和有向边来直观表示，每个节点代表一...
在这个小例子中，我们看到"茶壶"作为标签，这通常是指在计算机图形学中使用的经典测试模型—— Utah Teapot。它在3D编程的示例中经常出现，因为它有一个相对复杂但又易于识别的形状，适合展示基本的3D渲染技术。 ...
`WNDCLASSEX` 结构用于定义窗口类，包括窗口回调函数 `MsgProc`，窗口类名 "D3D Tutorial"，以及窗口样式 `WS_OVERLAPPEDWINDOW`，使得窗口具有标准的窗口控件，如最大化、最小化和关闭按钮。 2. **初始化 Direct3D...
在我们的例子中，使用`D3DPRIMITIVETYPE_TRIANGLELIST`类型，参数为1表示绘制一个三角形。 最后，呈现帧并检查是否需要交换缓冲区，这通常通过调用`Present`函数完成。这个过程会重复进行，直到程序退出。 在...
在这个例子中，`getchar()`函数被用来读取来自标准输入的单个字符。当用户按下ESC键时，程序会退出循环并终止。此代码示例仅用于说明如何读取键盘扫描码，实际应用中可能需要更复杂的处理逻辑。 综上所述，键盘扫描...
如果在打开数据流的过程中失败，程序会输出错误信息并退出。 文章中还提到了Kinect传感器的一些参数，包括最大距离3500mm和最小距离200mm，这些参数分别用于计算物体距离传感器的最大和最小可检测范围。640x480代表...