Transition between circle and line

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

CSS

.circle {
    stroke:red;
    stroke-width:5; 
    fill:pink; 
    opacity: .5; 
}
.line{
    stroke:violet; 
    stroke-width: 2;  
    fill:None
}

JavaScript

var numberOfPoints = 30;
var radius = 60
var margin = {top: 20,left: 20}
var lineLength = 2 * radius * Math.PI

var circleData = $.map(Array(numberOfPoints), function (d, i) {
    var imag = margin.left + lineLength / 2 + radius * Math.sin(2 * i * Math.PI / (numberOfPoints - 1))
    var real = margin.top + radius - radius * Math.cos(2 * i * Math.PI / (numberOfPoints - 1))
    return {x: imag, y: real}
})

var lineData = $.map(Array(numberOfPoints), function (d, i) {
    var y = margin.top + 2 * radius;
    var x = margin.left + i * lineLength / (numberOfPoints - 1)
    return { x: x, y: y}
}).reverse()

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

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

//The Circle SVG Path we draw
var circle = svgContainer.append("g")
    .append("path")
    .data([circleData])
    .attr("d", lineFunction)
    .attr("class", "circle")
    .on("click", transitionToLine)

console.log(lineData);
function transitionToLine() {
    circle.data([lineData])
        .transition()
        .duration(1000)
        .ease("linear")
        .attr('d', lineFunction)
    circle.on("click", transitionToCircle)
}
function transitionToCircle() {
    circle.data([circleData])
        .transition()
        .duration(1000)
        .ease("linear")
        .attr('d', lineFunction)
    circle.on("click", transitionToLine)
}


    //The second SVG, a Line:
var line = svgContainer.append("path")
    .attr("d", lineFunction(lineData))
    .attr("class", "line")