[Solved]-d3.js draw line source and target is different (from an arc generated by d3.svg.arc() to the nodes with Cardinal position)-d3.js

Custom the source and target of d3.svg.diagonal(). Transform the source and target's space with different methods.

var diagonal = d3.svg.diagonal()
                        .source(function (d) {
                            var innerRadius = Math.max(0, y(d.source.y));
                            var arcCenter = x(d.source.x + d.source.dx/2.0);

                            return {"x": innerRadius * Math.cos(Math.PI - arcCenter),      //radial space
                                "y": innerRadius * Math.sin(Math.PI - arcCenter)};
                        })
                        .target(function (d) {                                           //normal space
                            return {"x": d.target.y + rect_height / 2,
                                "y": d.source.x ? d.target.x : d.target.x + rect_width};
                        })
                        .projection(function (d) {
                            return [d.y, d.x];
                        });