Moving Rectangle

This is an example of how to change the attributes of a SVG element through a HTML input. It is not fully bug tested - near the edges of the graph, the rectangle can get "stuck".

See http://www.puzzlr.org/ for more d3 related fun!

<!DOCTYPE html>
<html>
 <head>
<style>

</style>
 </head>
 
 <body>
x <input type = "range" min = "5" max = "500"  value = "5" id = "xvalue" > <br>
y <input type = "range" min = "5" max = "500"  value = "5" id = "yvalue" ><br>
width <input type = "range" min = "5" max = "500"  value = "5" id = "recwidth" ><br>
height <input type = "range" min = "5" max = "500"  value = "5" id = "recheight" >

//starting values of rectangle 
var x = 10
var y = 10
var width = 30
var height = 50

var temp;

var svg_width = 960
var svg_height = 500
var padding = 5

var svg = d3.select("body").append("svg")
			.attr("width", svg_width)
			.attr("height", svg_height);

svg.append("rect")
.attr("width", width)
.attr("height", height)
.attr("x", x)
.attr("y", y)
.style("fill", "none")
.style("stroke","black");

//change the x-value 
d3.select("#xvalue").on("input", function() {
  update(+this.value, "x");
});

//change the y-value 
d3.select("#yvalue").on("input", function() {
  update(+this.value, "y");
});

//change the width
d3.select("#recwidth").on("input", function() {
  update(+this.value, "width");
});

//change the height
d3.select("#recheight").on("input", function() {
  update(+this.value, "height");
});
  
  
function update(value, which_type) {
	
	//make sure we don't go off the screen
	if (which_type == "x")
	{
		temp = svg_width - padding - +d3.select("rect").attr("x")
		updateMax(temp,"#recwidth")
		if( (+d3.select("rect").attr(which_type) + padding + +d3.select("rect").attr("width")) > svg_width ) {
						
			//max value
			value = temp;
		}
	}
	if (which_type == "y")
	{
		temp = svg_height - padding - +d3.select("rect").attr("y")
		updateMax(temp,"#recheight")
		if( (+d3.select("rect").attr(which_type) + padding + +d3.select("rect").attr("height")) > svg_height ) {
			value = temp;
		}		
	}
	if (which_type == "width")
	{
		temp = svg_width - padding - +d3.select("rect").attr("width")
		updateMax(temp,"#xvalue")	
		if( (+d3.select("rect").attr(which_type) + padding + +d3.select("rect").attr("x")) > svg_width ) {
			value = temp;
		}		
	}
	if (which_type == "height")
	{
		temp = svg_height - padding - +d3.select("rect").attr("height")
		updateMax(temp,"#yvalue")
		if( (+d3.select("rect").attr(which_type) + padding + +d3.select("rect").attr("y")) > svg_height ) {
			value = temp;
		}		
	}
	
	d3.select("rect")
	.attr(which_type, value);

}

function updateMax(max,id) {
	d3.select("body").select(id).attr("max",max)
}

</script>
</body>
</html>

Modified http://mbostock.github.com/d3/d3.js to a secure url

https://mbostock.github.com/d3/d3.js