javascript - D3 linking and nodes and dynamic data -
my problem when download data, 2 nodes in left-top corner of svg , have lot of errors saying "invalid value attribute y1="nan"" (and more this, according variable x1, y1, y2). how make work properly?
my code js is:
<!doctype html> <meta charset="utf-8"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> <style> .link { fill: none; stroke: #666; stroke-width: 1.5px; } .node circle { fill: #ccc; stroke: #fff; stroke-width: 1.5px; } text { font: 10px sans-serif; pointer-events: none; } </style> <body> <script> var links = []; var nodes = []; var width = 960, height = 500; var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height); var force = d3.layout.force() .nodes(d3.values(nodes)) .links(links) .size([width, height]) .linkdistance(60) .charge(-300) .start(); var findnodeindex = function(name) { (var in nodes) { if (nodes[i]["name"]==name){ return nodes[i]; } }; }; $.get("/getairportconnection?airportfrom=stn", function (data) { //this downloads data in json data.foreach(function (link) { link.source = nodes[link.airportfrom] || (nodes[link.airportfrom] = {name: link.airportfrom}); link.target = nodes[link.airportto] || (nodes[link.airportto] = {name: link.airportto}); links.push({source: findnodeindex(link.airportfrom), target: findnodeindex(link.airportto)}); // when delete line there no links between nodes }); var force = d3.layout.force() .nodes(d3.values(nodes)) .links(links) .size([width, height]) .linkdistance(60) .charge(-300) .on("tick", tick) .start(); var link = svg.selectall(".link") .data(force.links()) .enter().append("line") .attr("class", "link"); var node = svg.selectall(".node") .data(force.nodes()) .enter().append("g") .attr("class", "node") .call(force.drag); node.append("circle") .attr("r", 8); node.append("text") .attr("x", 12) .attr("dy", ".35em") .text(function(d) { return d.name; }); function tick() { link .attr("x1", function(d) { return d.source.x; }) .attr("y1", function(d) { return d.source.y; }) .attr("x2", function(d) { return d.target.x; }) .attr("y2", function(d) { return d.target.y; }); node .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); } }); </script> </body> and json data downloaded server one:
[{"airportfrom":"stn","airportto":"mxp"},{"airportfrom":"stn","airportto":"ciy"},{"airportfrom":"stn","airportto":"gnb"},{"airportfrom":"stn","airportto":"rjk"},{"airportfrom":"stn","airportto":"osr"},{"airportfrom":"stn","airportto":"tll"},{"airportfrom":"stn","airportto":"efl"},{"airportfrom":"stn","airportto":"sxb"},{"airportfrom":"stn","airportto":"nue"},{"airportfrom":"stn","airportto":"aar"},{"airportfrom":"stn","airportto":"agp"},{"airportfrom":"stn","airportto":"aho"},{"airportfrom":"stn","airportto":"aoi"},{"airportfrom":"stn","airportto":"bds"},{"airportfrom":"stn","airportto":"bgy"},{"airportfrom":"stn","airportto":"biq"},{"airportfrom":"stn","airportto":"bre"},{"airportfrom":"stn","airportto":"bri"},{"airportfrom":"stn","airportto":"brq"},{"airportfrom":"stn","airportto":"bts"},{"airportfrom":"stn","airportto":"bzg"},{"airportfrom":"stn","airportto":"ccf"},{"airportfrom":"stn","airportto":"cia"},{"airportfrom":"stn","airportto":"dnr"},{"airportfrom":"stn","airportto":"dub"},{"airportfrom":"stn","airportto":"egc"},{"airportfrom":"stn","airportto":"ein"},{"airportfrom":"stn","airportto":"fkb"},{"airportfrom":"stn","airportto":"gdn"},{"airportfrom":"stn","airportto":"goa"},{"airportfrom":"stn","airportto":"gro"},{"airportfrom":"stn","airportto":"gse"},{"airportfrom":"stn","airportto":"hau"},{"airportfrom":"stn","airportto":"hhn"},{"airportfrom":"stn","airportto":"ibz"},{"airportfrom":"stn","airportto":"kir"},{"airportfrom":"stn","airportto":"krk"},{"airportfrom":"stn","airportto":"ktw"},{"airportfrom":"stn","airportto":"kun"},{"airportfrom":"stn","airportto":"lcj"},{"airportfrom":"stn","airportto":"lej"},{"airportfrom":"stn","airportto":"ldy"},{"airportfrom":"stn","airportto":"lei"},{"airportfrom":"stn","airportto":"lig"},{"airportfrom":"stn","airportto":"lnz"},{"airportfrom":"stn","airportto":"lrh"},{"airportfrom":"stn","airportto":"luz"},{"airportfrom":"stn","airportto":"mad"},{"airportfrom":"stn","airportto":"mjv"},{"airportfrom":"stn","airportto":"mla"},{"airportfrom":"stn","airportto":"mmx"},{"airportfrom":"stn","airportto":"mrs"},{"airportfrom":"stn","airportto":"noc"},{"airportfrom":"stn","airportto":"nrn"},{"airportfrom":"stn","airportto":"nyo"},{"airportfrom":"stn","airportto":"opo"},{"airportfrom":"stn","airportto":"ork"},{"airportfrom":"stn","airportto":"peg"},{"airportfrom":"stn","airportto":"pfo"},{"airportfrom":"stn","airportto":"pgf"},{"airportfrom":"stn","airportto":"pis"},{"airportfrom":"stn","airportto":"pmf"},{"airportfrom":"stn","airportto":"poz"},{"airportfrom":"stn","airportto":"psr"},{"airportfrom":"stn","airportto":"puy"},{"airportfrom":"stn","airportto":"reu"},{"airportfrom":"stn","airportto":"rdz"},{"airportfrom":"stn","airportto":"rix"},{"airportfrom":"stn","airportto":"rze"},{"airportfrom":"stn","airportto":"scq"},{"airportfrom":"stn","airportto":"sdr"},{"airportfrom":"stn","airportto":"snn"},{"airportfrom":"stn","airportto":"svq"},{"airportfrom":"stn","airportto":"sxf"},{"airportfrom":"stn","airportto":"szg"},{"airportfrom":"stn","airportto":"szz"},{"airportfrom":"stn","airportto":"tfs"},{"airportfrom":"stn","airportto":"tln"},{"airportfrom":"stn","airportto":"tmp"},{"airportfrom":"stn","airportto":"trf"},{"airportfrom":"stn","airportto":"trn"},{"airportfrom":"stn","airportto":"trs"},{"airportfrom":"stn","airportto":"tuf"},{"airportfrom":"stn","airportto":"vlc"},{"airportfrom":"stn","airportto":"wro"},{"airportfrom":"stn","airportto":"xry"},{"airportfrom":"stn","airportto":"zaz"},{"airportfrom":"stn","airportto":"vst"},{"airportfrom":"stn","airportto":"alc"},{"airportfrom":"stn","airportto":"pmi"},{"airportfrom":"stn","airportto":"bll"},{"airportfrom":"stn","airportto":"fao"},{"airportfrom":"stn","airportto":"blq"},{"airportfrom":"stn","airportto":"fmm"},{"airportfrom":"stn","airportto":"ryg"},{"airportfrom":"stn","airportto":"ace"},{"airportfrom":"stn","airportto":"lpa"},{"airportfrom":"stn","airportto":"fue"},{"airportfrom":"stn","airportto":"pdv"},{"airportfrom":"stn","airportto":"lde"},{"airportfrom":"stn","airportto":"zad"},{"airportfrom":"stn","airportto":"pmo"},{"airportfrom":"stn","airportto":"skg"},{"airportfrom":"stn","airportto":"rho"},{"airportfrom":"stn","airportto":"suf"},{"airportfrom":"stn","airportto":"vno"},{"airportfrom":"stn","airportto":"cfu"},{"airportfrom":"stn","airportto":"tsf"},{"airportfrom":"stn","airportto":"bcn"},{"airportfrom":"stn","airportto":"psa"},{"airportfrom":"stn","airportto":"fez"},{"airportfrom":"stn","airportto":"rak"},{"airportfrom":"stn","airportto":"chq"},{"airportfrom":"stn","airportto":"kgs"},{"airportfrom":"stn","airportto":"bud"},{"airportfrom":"stn","airportto":"wmi"},{"airportfrom":"stn","airportto":"mst"},{"airportfrom":"stn","airportto":"rba"},{"airportfrom":"stn","airportto":"bod"},{"airportfrom":"stn","airportto":"lis"},{"airportfrom":"stn","airportto":"dtm"},{"airportfrom":"stn","airportto":"bsl"},{"airportfrom":"stn","airportto":"bve"},{"airportfrom":"stn","airportto":"otp"},{"airportfrom":"stn","airportto":"osi"},{"airportfrom":"stn","airportto":"tgd"},{"airportfrom":"stn","airportto":"prg"},{"airportfrom":"stn","airportto":"sft"},{"airportfrom":"stn","airportto":"ath"},{"airportfrom":"stn","airportto":"cgn"}]
you setting unnecessary attributes , don't need use findnodeindex function either -- problem is. of nodes not being matched correctly. can write
data.foreach(function (link) { links.push({source: nodes[link.airportfrom] || (nodes[link.airportfrom] = {name: link.airportfrom}), target: nodes[link.airportto] || (nodes[link.airportto] = {name: link.airportto})}); }); complete example here.
Comments
Post a Comment