d3.js - trying to understand javascript code -

d3.js - trying to understand javascript code -

i trying understand javascript code getting hands dirty.. background python , c++.

so going thru code here

http://bl.ocks.org/mbostock/1021841

var forcefulness = d3.layout.force() .nodes(nodes) .links([]) .size([w, h]) .start();

i guessing "." represents method.. object? , having hard time understanding convoluted function (method??)

force.on("tick", function(e) { // force different nodes in different directions clustering. var k = 6 * e.alpha; nodes.foreach(function(o, i) { o.y += & 1 ? k : -k; o.x += & 2 ? k : -k; });

can break downwards me in simpler language. thanks

this code:

var forcefulness = d3.layout.force() .nodes(nodes) .links([]) .size([w, h]) .start();

should read in same read if c++ (except var keyword; in c++ you'd have declare particular type force). c++, white space (mostly) insignificant. each . indicates property access. (unlike c++, javascript objects don't distinguish fields methods; property. if it's function property, can called next name parentheses—with function arguments in parentheses if appropriate.) what's going on here is:

d3.layout - access layout property of d3. .force() - invoke force function property of d3.layout. within force, d3.layout available keyword this. .nodes(nodes) - invoke nodes function property of whatever object returned phone call force() (perhaps d3.layout, perhaps else). etc.

finally assigning force value returned start().

regarding sec piece of code:

force.on("tick", function(e) { // force different nodes in different directions clustering. var k = 6 * e.alpha; nodes.foreach(function(o, i) { o.y += & 1 ? k : -k; o.x += & 2 ? k : -k; });

here see illustration (two, actually) of anonymous function. based on usual javascript conventions, on function of force used register event hander—in case "tick" event. event handler anonymous function:

function(e) { // force different nodes in different directions clustering. var k = 6 * e.alpha; nodes.foreach(function(o, i) { o.y += & 1 ? k : -k; o.x += & 2 ? k : -k; }

for purposes of explanation, let's phone call function "outer". takes argument guess object containing properties of tick event. in body of outer, see anonymous function: argument nodes.foreach. let's phone call sec anonymous function "inner". foreach function here standard foreach iterator function property of javascript arrays; takes function argument , invokes function on every element of array in sequence, passing array element , element index. inner illustration of closure: function body references variable k defined local variable of outer.

javascript in ways c++ , in ways fundamentally different. unless know similarities end , differences begin, c++ background can lead astray in coding (and code reading) efforts. highly recommend introductory paper "a re-introduction javascript". covers major features of language , should help clarify how c++ , javascript similar , how different.

javascript d3.js force-layout