D3.js Study Notes

Getting Started Good article: http://www.ourd3js.com/wordpress/?p=51

D3.js and D3.min.js content, the latter is compressed, suitable for release, the former suitable for developers.

1. Selection set (meets CSS selector requirements) primarily used with data binding

D3.select ()

D3.selectall ()

var BODY = D3.select ("Body")

2. Data binding (essentially adding a variable to the element object in the selection set, and assigning a value)

P.text (function (d,i)) {return d+ "" +i}

Update, enter (not enough), exit (more) processing templates, more commonly used in D3

3. Draw a Column chart

1. Scale

The first is a sequential sequence, the second is a discrete sequence, the third is a time series

2. Axes

Https://github.com/d3/d3/wiki/SVG

SVG is a vector-supported canvas, the vector zoom reduction is not affected, the scalar graph amplification will be distorted.

Console output: Console.log ()

function (d, i), d represents the data bound to the current element, I represents the index number

Select, INSERT, delete elements

Tempdatax

Call logs between users (that is, when user A and User B have made a call)

TempData

Frequency of calls between target users

What is 151??????????

 for(vari=0;i<tempdatax.nodes.length;i++){        varTempimg=math.floor (Math.random () *151) +1What is//151????? if(tempimg>102) {tempimg=icon_list[math.floor (Math.random () *6)].url; }Else{//internal staff, with AvatarTempimg= "img/image/" + ((Tempimg < && "xx" +tempimg) | | (tempimg >=10 && tempimg < && "0" +tempimg) | | (tempimg >= && tempimg)) + ". jpg"; } nodearray.push ({"id": "" +tempdatax.nodes[i].id,//Unique ID"img": {"url": tempimg, "width": +, "height": 16},//Picture Data Path"title": "" +Tempdatax.nodes[i].id,"PROPN": 1,//the number of properties displayed, starting from prop 笿 敿"Prop": [{"title": "Name", "Value": Tempdata.nodes[math.floor (Math.random () *76)].name+ "", "type": 0}],//Metadata Title Title value value, type display mode 0 only display value, 1 show all _ only display the standard ACHA"Event":{            "Click":function(d) {},"DblClick":function(d) {}},"PropValue":{}        });};

D3.js Study Notes