Transition between circle and line

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="350px">
    <defs>
        <linearGradient id="grad1" x1="0%" y1="0%" x2="40%" y2="0%">
            <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
            <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
        </linearGradient>
    </defs>
    <g id="rotateCircle">
        <rect stroke="black" x="100px" y="47px" width="314.15px" height="1px"/>
        <circle fill="url(#grad1)" stroke="#646464" stroke-width="5px" cx="100px" cy="100px" r="50px">
            <animateTransform attributeType="XML" attributeName="transform" type="rotate" from="360,100,100" to="0,100,100" begin="0s" dur="2s" repeatCount="1" />
            <animateMotion from="0,0" to="314.159,0" begin="0s" dur="2s" fill="freeze" />
        </circle>
    </g>
    <g id="rotateOcto">
        <rect stroke="black" x="133px" y="197px" width="314.15px" height="1px"/>
        <polygon points="133,0   166,0  200,33  200,66 166,100  
                   133,100  100,66  100,33"
          style="stroke:#660000; fill:url(#grad1); stroke-width: 3;">
        
            <animateTransform attributeType="XML" attributeName="transform" type="rotate" from="360,150,50" to="0,150,50" begin="0s" dur="2s" repeatCount="1" />
            <animateMotion from="0,203" to="314.159,203" begin="0s" dur="2s" fill="freeze" />
        </polygon>
    </g>
</svg>

CSS

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

JavaScript

var numberOfPoints = 8;
var radius = 50;
var margin = {top: 20, left: 100};
var lineLength = 2 * radius * Math.PI;
var cx = 257.08;
var cy = 70;

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.center;
    var x = margin.left + i * lineLength / (numberOfPoints - 1)
    return {x: x, y: y}
});
var purpleLineData = $.map(Array(numberOfPoints), function (d, i) {
    var y = 0;
    var x = margin.left + i * lineLength / (numberOfPoints - 1)
    return {x: x, y: y}
});

//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", 500)
    .attr("height", 400);

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

//The purple line SVG Path we draw
var line2 = svgContainer.append("g")
    .append("path")
    .data([purpleLineData])
    .attr("d", lineFunction)
    .attr("class", "line")
    .on("click", moveAlongLine)

function moveAlongLine() {
    circle.data([lineData])
    .attr("transform", "translate(78.5,0) rotate(-90, 257.08 70) ")
    .duration(1000)
    circle.on("click", transitionToCircle)
}

function transitionToLine() {
    circle.data([lineData])
        .transition()
        .duration(1000)
        .ease("linear")
        .attr("transform", "translate(78.5,0) rotate(-360, 257.08 70) ")
        .attr('d', lineFunction)
    circle.on("click",...