D3SJ Svg Line Work

by Yaprak Ayazoğlu

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="svg-canvas">
    
</div>

CSS

.inter-path{
    z-index: 1000;
}

.my-circle{
    z-index: 500;
}

.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 1.5px;
}

JavaScript

x_0 = 50; y_0 = 50; x_1 = 200; y_1 = 200

var lineData = [ ];
// calculate the angle in radians
alpha_rad = Math.atan( ( y_0 - y_1  ) / (x_0 - x_1)  );
// construct the constant angle list
sign = -1
angleList = [  sign*5*Math.PI/6.0 , sign*4*Math.PI/6.0, sign*3*Math.PI/6.0,
            sign*2*Math.PI/6.0, sign*Math.PI/6.0];
// calculate center
c = [ Math.abs(x_0 + x_1) / 2.0, Math.abs(y_0 + y_1) / 2.0 ]
// calculate radius
r = Math.sqrt( (c[0] - x_0)*(c[0] - x_0) + (c[1] - y_0)*(c[1] - y_0) );
// push the first item
lineData.push( { "x": x_0, "y": y_0 } );
// for all of the angles 
for(var i=0; i<angleList.length; i++){
    // calculate x  = c_x + r*Math.cos(angle - angleList_i)
    x = c[0] + r*Math.cos( angleList[i] + alpha_rad )
    // calculate y  = c_y + r*Math.sin(angle - angleList_i)
    y = c[1] + r*Math.sin( angleList[i] + alpha_rad )
    // push to the line data array
    lineData.push( { "x" : x, "y": y });
}
// end for --------

// push the last item
lineData.push( {"x": x_1 ,"y": y_1 });


 //This is the accessor function we talked about above
 var lineFunction = d3.svg.line()
                          .x(function(d) { return d.x; })
                          .y(function(d) { return d.y; })
                         .interpolate("basis");

 var lineFunction2 = d3.svg.line()
                          .x(function(d) { return d.x; })
                          .y(function(d) { return d.y; })
                         .interpolate("basis-closed");

//The SVG Container
var svgContainer = d3.select("body").append("svg")
                                    .attr("width", 400)
                                    .attr("height", 400);

//The line SVG Path we draw
lineEnter = svgContainer.append("g")
var myLine = lineEnter.append("path")
    .attr("d", lineFunction(lineData))
    .attr("stroke", "blue")
    .attr("stroke-width", 2)
    .attr("fill", "none");

lineEnter.append("text").text("Yaprak")
.attr("y", function(d){ 
    console.log(d);
   ...