d3.js學習3

標籤：

Enter-update-exit模式

select.data(data)，代表selection圖形與data資料的交集->Update Mode

select.data(data).enter()，代表data資料排除selection圖形與data資料的交集->Enter Mode

select.exit，移除所有資料，代表selection圖形的部分->Exit Mode

E-U-E即為d3.js的基礎

數組資料繫結

 

 

var data=[10,15,24,46,13,6,96,12,44,61,17];function render(data){    //進入    d3.select("body").selectAll("div.h-bar")//選擇頁面上所有即將產生的css為h-bar的元素    .data(data)    .enter()    .append("div")    .attr("class","h-bar")    .append("span");//用來顯示當前值d    //更新    d3.select("body").selectAll("div.h-bar")    .data(data)    .style("width",function(d){//設定柱狀圖的長度為d的3倍    return (d*3)+"px";  })    .select("span")//在span內輸出d值    .text(function(d){    return d;    });    //退出    d3.select("body").selectAll("div.h-bar")    .data(data)    .exit()    .remove();}setInterval(function(){    data.shift();//去除第一個元素，用於動態迴圈展示資料    data.push(Math.round(Math.random()*100));//在結尾處加一個隨機資料，同樣用於動態迴圈示範    render(data);},15000);//1.5秒每次迴圈更新資料render(data);//初次展示資料

CSS:

<style type="text/css">.h-bar {    min-height: 15px;    min-width: 10px;    background-color: steelblue;    margin-bottom: 2px;    font-size: 11px;    color: #f0f8ff;    text-align: right;    padding-right: 2px;}</style>

 

d3.js學習3