D3-1 进去,更新,退出模式例子(数组作为数据)
D3-1 进入,更新,退出模式例子(数组作为数据)
D3对数据和图片的处理规则:
操作对象:数据集合 + 图片集合
操作名称: 进入,更新,退出。
进入:选择出来没有绑定图片的数据。
更新:选择已经绑定图片和数据的集合。
退出:选择没有绑定数据的图片。
下面是实例,各种注意在注释中已经表明。
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>