Continued from the previous section for static case (Inscribed Triangle - static), we'll add some animations to it.

To see the animation, drag the mouse.

The code looks like this:

<div id="inscribedTriangleAnimation">
     <script type="text/javascript"> 
       var isMouseDown = 0;
       var cRadius = 200;
       var xCircle = 200,
           yCircle = 0;

       var svgContainer = d3.select("#inscribedTriangleAnimation").append("svg")
                         .attr("width", 600)
                         .attr("height", 600)
                         .append("g")
                         .attr("transform", "translate(250,250) scale(1,-1)")
                         .style("stroke-width", 3)
                         .style("stroke", "#0077bb")
                         .style("fill", "#ffffdd"); 

       svgContainer.append("path")
            .attr("d","M -200,0 A200,200 0 0,0 200,0 L -200,0")
            .attr("class", "outline")
            .style("fill", "#ffffdd")
            .style("stroke", "#0077bb")
            .style("stroke-width", 3);         

       var cGroup = svgContainer.append("g");

       var circleData = [
                          { "id": "circlepoint", "class": "point", "cx": 0, "cy": 200, "radius": 5 },
                          { "id": "", "class":        "point", "cx": 0, "cy": 0, "radius": 5 },
                          { "id": "", "class": "point", "cx": -200, "cy": 0, "radius": 5 },
                          { "id": "", "class": "point", "cx": 200, "cy": 0, "radius": 5 }                        
                        ];

       var circles = cGroup.selectAll("circle")           
                         .data(circleData)
                         .enter()
                         .append("circle");

       var circleAttributes = circles
                         .attr("id", function (d) { return d.id; })
                         .attr("class", function (d) { return d.class; })
                         .attr("cx", function (d) { return d.cx; })
                         .attr("cy", function (d) { return d.cy; })
                         .attr("r", function (d) { return d.radius; });

       var lineData = [
                          { "id": "rightline", "class": "thickline", "x1": 200, "y1": 0, "x2": 0, "y2": 200 },
                          { "id": "leftline", "class": "thickline", "x1": -200, "y1": 0, "x2": 0, "y2": 200 },
                          { "id": "radline", "class": "thinline", "x1": 0, "y1": 0, "x2": 0, "y2": 200 }                        
                        ];

       var lines = cGroup.selectAll("line")           
                         .data(lineData)
                         .enter()
                         .append("line");

       var lineAttributes = lines
                         .attr("id", function (d) { return d.id; })
                         .attr("class", function (d) { return d.class; })
                         .attr("x1", function (d) { return d.x1; })
                         .attr("y1", function (d) { return d.y1; })
                         .attr("x2", function (d) { return d.x2; })
                         .attr("y2", function (d) { return d.y2; });

       var axis = svgContainer.append("line")
                    .attr("class", "axis")
                    .attr("x1",-240)
                    .attr("y1",0)
                    .attr("x2",240)
                    .attr("y2",0)
                    .style("fill", "none")
                    .style("stroke", "#333333")
                    .style("stroke-width", 1.6);

       var square = svgContainer.append("rect")
                    .attr("id","rightAngle")
                    .attr("x",0)
                    .attr("y",200)
                    .attr("width", 20)
                    .attr("height", 20)
                    .attr("transform","rotate(225,0,200)")
                    .style("fill", "#ffffff")
                    .style("stroke", "#000000")
                    .style("stroke-width", 1.6);

       var textData = [
                   { "id": "circpointlabel", "class": "pointlabels", "x": 0, "y": -214, "transform": "scale(1,-1)", "name": "B" },
                   { "class": "pointlabels", "x": -210, "y": 20, "transform": "scale(1,-1)", "name": "A" },
                   { "class": "pointlabels", "x": 210, "y": 20, "transform": "scale(1,-1)", "name": "C" },
                   { "class": "pointlabels", "x": 0, "y": 20, "transform": "scale(1,-1)", "name": "D" },                    
                   ];

       var texts = cGroup.selectAll("text")           
                         .data(textData)
                         .enter()
                         .append("svg:text");

       var textAttributes = texts
                         .attr("id", function (d) { return d.id; })
                         .attr("class", function (d) { return d.class; })
                         .attr("x", function (d) { return d.x; })
                         .attr("y", function (d) { return d.y; })
                         .attr("transform", function (d) { return d.transform; })
                         .text(function(d) { return d.name; })
                         .style("font-size", "16px")
                         .style("font-family", "Arial")
                         .style("font-style", "italic")
                         .style("fill", "black")
                         .style("stroke", "none");

       d3.selectAll(".thinline")
                    .attr("style", "stroke: #770000; stroke-dasharray: 12,4; stroke-width:1.6");

       d3.selectAll(".thickline")
                    .attr("style", "stroke: #ff2222; fill: none; stroke-width:3.5");

       d3.selectAll(".point")
                    .attr("style", "stroke: white; fill: #000000; stroke-width:1");


       var myCanvas = svgContainer.append("rect")
           .attr("id", "canvas")
           .attr("x", -250)
           .attr("y", 2)
           .attr("stroke","black")
           .attr("stroke-width",1)
           .attr("width", 500)
           .attr("height", 240)
           .attr("opacity", .2)
           .attr("pointer-events", "visible")
           .on("mouseup", mouseUp)
           .on("mousemove", mouseMove)
           .on("mousedown", mouseDown);


       function mouseDown(d) {
           console.log("mouseDown");
           isMouseDown = 1;
           var coordinates = [0, 0];
           coordinates = d3.mouse(this);
           var x = coordinates[0];
           var y = coordinates[1];
           console.log(x,y);
           svgContainer.append("text")
             .attr("x", x)
             .attr("y", y)
             .attr("dy", ".35em")
             .text(function(d) { return d; });
       }
 
       function mouseUp() {
           console.log("mouseUp");
           isMouseDown = 0;
           
       }
 
       function mouseMove() {
           console.log("mouseMove");
           var coordinates = [0, 0];
           coordinates = d3.mouse(this);
           var x = coordinates[0];
           var y = coordinates[1];
           console.log(x,y);
           aRadian = Math.atan2(y, x);
           console.log("ang", aRadian*180/Math.PI);
           if(isMouseDown == 1){
         console.log("mouse down");
               xCircle = cRadius * Math.cos(aRadian);
               yCircle = cRadius * Math.sin(aRadian);
               console.log("circle x,y =", xCircle,yCircle);
               d3.select("#circlepoint").attr("cx",xCircle).attr("cy",yCircle);
               d3.select("#leftline").attr("x2",xCircle).attr("y2",yCircle);
               d3.select("#rightline").attr("x2",xCircle).attr("y2",yCircle);
               d3.select("#radline").attr("x2",xCircle).attr("y2",yCircle);
               d3.select("#circpointlabel").attr("x",xCircle).attr("y",-(yCircle+14));
               var atan2 = Math.atan2(yCircle, cRadius - xCircle)*180/Math.PI;
               var ang2 = 270 - atan2;
               d3.select("#rightAngle").attr("x",xCircle).attr("y",yCircle)
                                       .attr("transform","rotate(" + ang2  + "," + xCircle + "," + yCircle + ")");

           } else if (isMouseDown == 0) {
         console.log("mouse up");
           } 
       }

     </script>
</div>

The layout of this page is different from the layout of other pages. The animation does not work on the new layout. So, for the time being, I stick to the old one.

There might be a bug either in my d3 script or there are some interactions with other scripts on the new page.

I'd appreciate if somebody lets me know what could be the issue.