javascript - How does d3.svg.diagonal() read bound data? -

-

i in process of learning d3.js right now, , going through few tutorials, find confused how commands d3.svg.diagonal() able access bound data. take example below:

 var canvas = d3.select('body').append('svg')         .attr('width', 500)         .attr('height', 500)         .append('g')             .attr('transform', 'translate(50,50)');      var tree = d3.layout.tree()         .size([400,400]);       var data = {         'name':'max',         'children': [             {                 'name':'sylvia',                 'children': [                     {'name': 'craig'},                     {'name': 'robin'},                     {'name': 'anna'}                 ]             },             {                 'name': 'david',                 'children': [                     {'name': 'jeff'},                     {'name': 'buffy'}                 ]             }         ]     }      var nodes = tree.nodes(data);     var links = tree.links(nodes);      var node = canvas.selectall('.node')         .data(nodes)         .enter()         .append('g')             .attr('class', 'node')             .attr('transform', function(d){ return 'translate(' + d.x +','+ d.y+')';});      node.append('circle')         .attr('fill', 'steelblue')         .attr('r', 5);      node.append('text')         .text(function(d) { return d.name; });      var diagonal = d3.svg.diagonal();      var link = canvas.selectall('link')         .data(links)         .enter()         .append('path')             .attr('class', 'link')             .attr('fill', 'none')             .attr('stroke', '#adadad')             .attr('d', diagonal)

i can see line 'var diagonal = d3.svg.diagonal()' function create "diagonal" paths, when setting attributes .link class-named elements creating, not see how '.attr("d", diagonal);' ever gets access data bound '.data(links)'. maybe if called function 'd' passed it, stands, not see diagonal ever gets access data. don't think connected tree layout, because never passed variable 'diagonal' either. can me wrap head around this?

the code

.attr("d", diagonal)

is in case equivalent to

.attr("d", function(d, i) { return diagonal(d, i); })

you're passing function diagonal() .attr() call in first case. in second case same thing happens except function pass anonymous (i.e. doesn't have name) , calls diagonal() inside.

from the documentation:

[i]f value function, function evaluated each selected element (in order), being passed current datum d , current index i, context current dom element.

so passing named function diagonal(), automatically gets data bound elements in selection.


Comments

Post a Comment

Popular posts from this blog

python - pip install -U PySide error -

-
does know how avoid following error when running pip install -u pyside per official website instructions here: https://pypi.python.org/pypi/pyside/#installing-pyside-on-a-mac-os-x-system note have done brew install qt successfully. you using pip version 7.0.3, version 7.1.2 available. should consider upgrading via 'pip install --upgrade pip' command. collecting pyside using cached pyside-1.2.4.tar.gz installing collected packages: pyside running setup.py install pyside complete output command /applications/anaconda/bin/python -c "import setuptools, tokenize;__file__='/private/var/folders/dy/ttgqhqqx3g9bsbsnqnxsk2z80000gq/t/pip-build-cpxemt/pyside/setup.py';exec(compile(getattr(tokenize, 'open', open)(__file__).read().replace('\r\n', '\n'), __file__, 'exec'))" install --record /var/folders/dy/ttgqhqqx3g9bsbsnqnxsk2z80000gq/t/pip-0r7hri-record/install-record.txt --single-version-externally-managed --compile: ...
Read more

arrays - C++ error: a brace-enclosed initializer is not allowed here before ‘{’ token -

-
simple question: i'm trying initialize array within c++ class declaration: using namespace std; #include <string> class myclass{ public: string myarray[] = {"a","b","c"}; }; and i'm getting error: error: brace-enclosed initializer not allowed here before ‘{’ token no, without complied c++11 compiler, cannot initialize member array in declaration. have initialize array member in constructor. , don't use open array if know number of elements initialize array.
Read more

cytoscape.js - How to add nodes to Dagre layout with Cytoscape -

-
i trying add nodes dagre graph through cityscape.js. problem nodes not painted. code have: cy.add({ group: "nodes", data: { id:"n0",name:"n0",weight: 75 }, }); $.ajax(url).done(function(jsontree){ var newnodes=[]; for(var i=1;i<6;i++){ //var child = jsontree.result[i]; newnodes.push( { group: "nodes", data: { id: "n"+i, name:"n"+i}}, { group: "edges", data: { id: "e"+i, source: "n0", target: "n"+i } } ); } cy.add(newnodes); any ideas? have used loaded function reload graph not work. not know if have use specific function reload graph. thank in advance. you need add positions new nodes. cytoscape.js docs : it important note positions of newly added nodes must defined when calling cy.add(). nodes can not placed in graph without valid position — otherwise not displayed. yo...
Read more