d3 | manipulating a single SVG shape

Manipulating a single SVG shape triggered via user input.

Also a good way to illustrate how SVG coordinate space works. Note you need to put the radius in to view the circle (otherwise it's at 0).


The cx and cy attributes define the x and y coordinates of the center of the circle. 

If cx and cy are omitted, the circle's center is set to (0,0)

The r attribute defines the radius of the circle

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Manipulate SVG shape via input</title>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.2/d3.js"></script>

var mySVG = d3.select("body")
            .append("svg:svg")
            .attr("width", w)
            .attr("height", h)

var circle = mySVG.append("circle")
            .style("fill", "grey")
            .attr("r", 100)
            .attr("cx", w/2)
            .attr("cy", h/2);

function handleClick(event){
            console.log(document.getElementById("myRadius").value)
            draw(document.getElementById("myRadius").value, document.getElementById("myX").value, document.getElementById("myY").value)
            return false;
        }

function draw(rad, x, y){
            circle
            .style("fill", "red")
            .attr("r", rad)
            .attr("cx", x)
            .attr("cy", y)
        }

</script>

</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.2/d3.js