d3.js - Why is the first Link item being skipped? -


i've got simple visualization i'm trying put together, having slight issue processing.

if use following snippet works expected:

var lines = svg.selectall("line")                         .data(data.links)                         .enter()                         .append("svg:line")                             .attr("x1", function(d) { return findnode(data.nodes, d.source).x;})                             .attr("y1", function(d) { return findnode(data.nodes, d.source).y;})                             .attr("x2", function(d) { return findnode(data.nodes, d.target).x;})                             .attr("y2", function(d) { return findnode(data.nodes, d.target).y;})                             .style("stroke", "#838383")                             .style("stroke-width", 1)                             .style("marker-end", "url(#end-arrow)"); 

if switch use different one, using paths:

var paths = svg.selectall("path")                         .data(data.links)                         .enter()                         .append("svg:path")                             .attr("d", function(d) {                                  debugger;                                 var src = findnode(data.nodes, d.source);                                 var tgt = findnode(data.nodes, d.target);                                 var xi = d3.interpolatenumber(src.x, tgt.x);                                 var curvature = 0.8;                                  return "m" + src.x + "," + src.y                                      + "c" + xi(curvature) + "," + src.y                                      + " " + xi(1 - curvature) + "," + tgt.y                                      + " " + tgt.x + "," + tgt.y;                             })                             .style("stroke", "#838383")                             .attr("fill", "none"); 

then reason first 'link' missing. can suggest why might be? there's jsfiddle here. effect expected missing, don't have nice rounded lines want.

the problem d3 matches selection .selectall("path") data index default , there path in svg (in defs). is, first data element matches first path in svg, there. therefore, not in .enter() selection.

the way fix specify function in optional second argument of .data() tell d3 how match elements, e.g.

.data(data.links, function(d, i) { return d + i; }) 

Comments

Popular posts from this blog

jquery - How can I dynamically add a browser tab? -

node.js - Getting the socket id,user id pair of a logged in user(s) -

keyboard - C++ GetAsyncKeyState alternative -