D3SJ reverse d3.svg.line()

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 = [{ "x": 50, "y": 50 }, {"x": 110,"y": 100}, {"x": 150,"y": 150}, {"x": 200, "y": 200}];

 //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");

//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);
    console.log("MyLine");
    console.log(myLine.attr("d"))
    return 10;
} );

var circles = svgContainer.selectAll(".my-circle")
circles.data(lineData)
.enter()
.append("circle")
.attr("class", ".my-circle")
.attr("r", 5 )
.attr("cx", function(d){ return d.x; })
.attr("cy", function(d){ return d.y; });