D3.js Study 3

Enter-update-exit mode

Select.data (data), which represents the intersection of the selection graph with the data->update Mode

Select.data (data). Enter () to exclude the intersection of selection graphics with data data on behalf of data->enter Mode

Select.exit, removes all data, representing parts of the selection graph->exit Mode

E-U-E is the foundation of D3.js

Array Data binding

var data=[10,15,24,46,13,6,96,12,44,61,17];function render (data) {    //Enter    d3.select ("Body"). SelectAll (" Div.h-bar ")//Select all the H-bar elements on the page that are about to be generated    . Data    . Enter ()    . Append (" div ")    . attr (" Class "," H-bar ")    . Append (" span ");//used to display the current value D    //update    D3.select (" Body "). SelectAll (" Div.h-bar ")    . Data (data)    . Style ("width", function (d) {//Set the histogram length to 3 times times    return (d*3) + "px";  }) of D.    Select ("span")//outputs the D value within span    . Text (function (d) {    return D;    });    Exit    D3.select ("Body"). SelectAll ("Div.h-bar")    . Data (data).    exit ()    . Remove (); SetInterval (function () {    data.shift ();//Remove the first element for Dynamic loop presentation of data    Data.push (Math.Round (Math.random () *100)); /Add a random data at the end, also used for Dynamic loop presentation of render (data),    },15000),//1.5 seconds per cycle to update data render (data);//Initial presentation

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 Study 3