Nunchuks

An example of the concept of nested SVG <g> elements, each having their own transform. This shows how the transforms nest such that the parent transform is applied to all children.

Built with blockbuilder.org

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width:100%; height: 100% }
    line {
      stroke: black;
      stroke-width: 30px;
      stroke-linecap: round;
    }
  </style>
</head>

<body>
  <script>
    var width = 960;
    var height = 500;
    var scaleFactor = 0.6;
    var svg = d3.select('body').append('svg')
      .attr({width: width, height: height});
    var g = svg.append('g')
      .attr('transform', 'translate('+(width/2)+', '+(height/2)+')');

function t(selection){
      selection.append('line')
        .attr('x1', -100)
        .attr('y1', 0)
        .attr('x2', 100)
        .attr('y2', 0);
    }
    var g1 = g.append('g').call(t);
    var g2 = g1.append('g').call(t);
    var g3 = g2.append('g').call(t);
    var g4 = g3.append('g').call(t);

var rotation = 0;
    function animate(){
      g1.attr('transform', 'rotate('+rotation+')');
      g2.attr('transform', 'translate(100, 0) rotate('+rotation*2+') scale('+scaleFactor+')');
      g3.attr('transform', 'translate(100, 0) rotate('+rotation*4+') scale('+scaleFactor+')');
      g4.attr('transform', 'translate(100, 0) rotate('+rotation*8+') scale('+scaleFactor+')');

rotation += 1;
      requestAnimationFrame(animate);
    }
    animate();
  </script>
</body>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js