D3.js Straight Links In Tree After Transformation

I am trying to make my tree have a straight links between the parent node and the children nodes. I have straight links now but the links are not connecting to the right places. I

Solution 1:

I finally got it to work.. The solution is quite bizarre. There is no projection method for line as there is for diagonal. So when resetting the positions of x1,x2,y1,y2 needs a little bit tuning just like the diagonal projection.

Also I have to apply the transformation like how the nodes are applied but without the translation.

var link = svg.selectAll("link")
   .data(links)
   .enter().append("path")
   .attr("class", "link")



var lines = svg.selectAll('line')
      .data(links)
      .enter()
      .append('line')
      .attr('stroke','#000')


lines.attr('x1',function(d){return d.source.y})
    .attr('y1',function(d){return d.source.x/180*Math.PI})
    .attr('x2',function(d){return d.target.y })
    .attr('y2',function(d){return d.target.x/180*Math.PI})

    // lines.attr("transform", function(d) {
    //  return"rotate(" + (d.source.x - 90 ) + ")translate(" + d.source.y + ")"; })

   lines.attr("transform", function(d) {      
     return"rotate(" + (d.target.x - 90 ) + ")"; })