d3.js - use of "d" in function literal in D3? -

d3.js - use of "d" in function literal in D3? -

i teaching myself d3 without much knowledge on syntax / grammar of javascript. explain utilize of "d" parameter in next function literal?

i see points info set beingness worked on, want understand grammar behind this.

d3.selectall("circle") .attr("cy",function (d) { homecoming percent_scale(d.late_percent);}) .attr("cx",function (d) { homecoming time_scale(d.time);}) .attr("r",1);

this called anonymous function, function isn't given named label. anonymous functions in javascript objects else , why can pass them parameters other javascript functions.

in case of d3, allows pass in function sec parameter. discovered, function called current info element index of current info element. if sec parameter not function, can utilize value instead.

in example:

d3.selectall("circle") .attr("cy",function (d) { homecoming percent_scale(d.late_percent);}) .attr("cx",function (d) { homecoming time_scale(d.time);}) .attr("r",1);

both cy , cx beingness assigned values based on homecoming value of anonymous function call, while r beingness assigned static value. rewrite as:

function sety(d) { homecoming percent_scale(d.late_percent);} function setx(d) { homecoming time_scale(d.time); } d3.selectall("circle") .attr("cy", sety) .attr("cx", setx) .attr("r",1);

here i've replaced anonymous function calls more standard function definitions , specified name of function called in d3 call. works same before. note there nil magical d in case.

function sety(foo) { homecoming percent_scale(foo.late_percent);} function setx(foo) { homecoming time_scale(foo.time); } d3.selectall("circle") .attr("cy", sety) .attr("cx", setx) .attr("r",1);

this code same thing. note i've renamed parameter d foo, changes how access parameter within function. has no effect outside of function call. in d3 documentation , tutorials, you'll see d used current info element , i used index of current info element. index passed in sec element function calls so:

function sety(d, i) { homecoming percent_scale(d.late_percent);} function setx(d, i) { homecoming time_scale(d.time); } d3.selectall("circle") .attr("cy", sety) .attr("cx", setx) .attr("r",1);

now in d3 case:

// select of 'circle' elements (that <circle>) elements // in html document , set associated info array d3.selectall("circle") // each circle element, set y position result // of calling percent_scale on info element late_percent .attr("cy",function (d) { homecoming percent_scale(d.late_percent);}) // each circle element, set x position result // of calling time_scale on info element time .attr("cx",function (d) { homecoming time_scale(d.time);}) // each circle element, set radius 1 .attr("r",1);

this mutual build in d3. first step create selection define set of elements want modify (this .selectall in case). after that, can chain additional calls (in case .attr calls) perform desired modifications elements.

this creates powerful method of working info driven documents (like graphs, charts, etc) without having track info elements manually or have create lots of loops. in fact, can tell using d3 incorrectly if have loops in code deals modifying elements.

if don't have much experience javascript, tutorials @ https://www.dashingd3js.com/ might helpful getting started d3.

function d3.js literals