javascript - the lines' points x1, x2, y1, y2 do not coincide with nodes in a radial tree -

i try connect nodes svg lines in radial graph points x1, x2, y1, y2 not coincide nodes. changed polar coordinates cartesian coordinates think missed something.

here jsfiddle.i tried far solve problem

please help! thanks

line.append("line")       .attr("class", "line")       .attr("x1", function(d) {return d.source.y * math.cos(d.source.x-90);})       .attr("y1", function(d) {return d.source.y * math.sin(d.source.x-90);})       .attr("x2", function(d) {return d.target.y * math.cos(d.target.x-90);})       .attr("y2", function(d) {return d.target.y * math.sin(d.target.x-90);})         .attr("stroke-width", 3)       .attr("stroke", "steelblue"); 

you close! javascript trigonometric functions work in radians, not degrees, if account that, graph work.

line.append("line")   .attr("class", "line")   .attr("x1", function(d) {return d.source.y * math.cos(math.pi/180 * (d.source.x-90));})   .attr("y1", function(d) {return d.source.y * math.sin(math.pi/180 * (d.source.x-90));})   .attr("x2", function(d) {return d.target.y * math.cos(math.pi/180 * (d.target.x-90));})   .attr("y2", function(d) {return d.target.y * math.sin(math.pi/180 * (d.target.x-90));})     .attr("stroke-width", 3)   .attr("stroke", "steelblue");