DanielJWood/square.html

## square.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />

    <script src="http://d3js.org/d3.v3.min.js"></script>

    <style>
        rect {
            fill:transparent;
            stroke-width:3;
            stroke: black;
        }
    </style>

  </head>
  <body>
    <svg width="1000" height="1000">
<!--         <g class="single-rect">
            <g class="rect-container">
                <rect class="rotate-me" width=100 height=100 />
            </g>
        </g>
         -->
        <g class="group">
            <g class="g-container">
                <g class="rotate-me">
                </g>
            </g>
        </g>
    </svg>

    <script type="text/javascript">

// var svg = d3.select("svg")
//     .append("svg")
//     .attr("width","1000")
//     .attr("height","1000")

var g = d3.select("svg").append("g")
    .attr("class","single-rect")
    .append("g").attr("class","rect-container")

var rect1 = g.append("rect")
    .attr("class","rotate-me")
    .attr("width","100")
    .attr("height","100")

var center, centerToOrigin, group;

centerToOrigin = function(el) {
  var boundingBox;
  boundingBox = el.getBBox();
  return {
    x: -1 * Math.floor(boundingBox.width / 2),
    y: -1 * Math.floor(boundingBox.height / 2)
  };
};

group = d3.select("g.rotate-me");
center = centerToOrigin(group.node());
group.attr("transform", "translate(" + center.x + ", " + center.y + ")");

        // #clean rotation - single element
        rect = d3.select("rect.rotate-me")
        center = centerToOrigin(rect.node())
        rect.attr("transform", "translate(" + center.x + ", " + center.y + ")");

        d3.select("g.rect-container")
            .transition()
            .duration(1000)
            .attr("transform", "rotate(180)")
        d3.select('g.single-rect').attr("transform", "translate(300,100)")


        // #clean rotation - group of two elements
        // group = d3.select("g.rotate-me")
        // center = centerToOrigin(group.node())
        // group.attr("transform", "translate(" + center.x + ", " + center.y + ")");

        // d3.select("g.g-container")
        //     .transition()
        //     .duration(1000)
        //     .attr("transform", "rotate(180)")
        // d3.select('g.group').attr("transform", "translate(300,300) scale(.5)")

    </script>


  </body>

</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />

	<script src="http://d3js.org/d3.v3.min.js"></script>

	<style>
	rect {
	fill:transparent;
	stroke-width:3;
	stroke: black;
	}
	</style>

	</head>
	<body>
	<svg width="1000" height="1000">
	<!-- <g class="single-rect">
	<g class="rect-container">
	<rect class="rotate-me" width=100 height=100 />
	</g>
	</g>
	-->
	<g class="group">
	<g class="g-container">
	<g class="rotate-me">
	</g>
	</g>
	</g>
	</svg>

	<script type="text/javascript">

	// var svg = d3.select("svg")
	// .append("svg")
	// .attr("width","1000")
	// .attr("height","1000")

	var g = d3.select("svg").append("g")
	.attr("class","single-rect")
	.append("g").attr("class","rect-container")

	var rect1 = g.append("rect")
	.attr("class","rotate-me")
	.attr("width","100")
	.attr("height","100")

	var center, centerToOrigin, group;

	centerToOrigin = function(el) {
	var boundingBox;
	boundingBox = el.getBBox();
	return {
	x: -1 * Math.floor(boundingBox.width / 2),
	y: -1 * Math.floor(boundingBox.height / 2)
	};
	};

	group = d3.select("g.rotate-me");
	center = centerToOrigin(group.node());
	group.attr("transform", "translate(" + center.x + ", " + center.y + ")");

	// #clean rotation - single element
	rect = d3.select("rect.rotate-me")
	center = centerToOrigin(rect.node())
	rect.attr("transform", "translate(" + center.x + ", " + center.y + ")");

	d3.select("g.rect-container")
	.transition()
	.duration(1000)
	.attr("transform", "rotate(180)")
	d3.select('g.single-rect').attr("transform", "translate(300,100)")


	// #clean rotation - group of two elements
	// group = d3.select("g.rotate-me")
	// center = centerToOrigin(group.node())
	// group.attr("transform", "translate(" + center.x + ", " + center.y + ")");

	// d3.select("g.g-container")
	// .transition()
	// .duration(1000)
	// .attr("transform", "rotate(180)")
	// d3.select('g.group').attr("transform", "translate(300,300) scale(.5)")

	</script>


	</body>

	</html>