title: Add moving circles to transitioning nested paths in d3.js
body: <p>I want to add circles to an svg for each path created by the nest so that the circles lead the drawing of the paths. Similar to <a href="https://jsfiddle.net/mbrownshoes/ozpt6dn7/2/" rel="nofollow noreferrer">this fiddle</a>, but with nested data.</p>
  <p>Here is some reproducible example code in d3.v4 and a runnable snippet of the paths I would like to add circles to:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var data=[{group:1,x:6,y:8},
    {group:1,x:4,y:4},
    {group:1,x:1,y:2},
    {group:2,x:8,y:3},
    {group:2,x:1,y:6},
    {group:2,x:7,y:5},
    {group:3,x:7,y:1},
    {group:3,x:6,y:6},
    {group:3,x:3,y:2}];
  
  var height = 600
  var width = 800
  
  var svg = d3.select("body")
    .append("svg")
    .attr("height", "100%")
    .attr("width", "100%");
  
  var colours = ["#0000FF",
    "#FF0000",
    "#00FF00"
  ];
  
  var line = d3.line()
    .x(function(d, i) {
      return d.x * 20;
    })
    .y(function(d, i) {
      return d.y * 20;
    })
    .curve(d3.curveNatural);
  
  function tweenDash() {
    var l = this.getTotalLength(),
      i = d3.interpolateString("0," + l, l + "," + l);
    return function(t) {
      return i(t);
    };
  }
  
  function transition(selection) {
    selection.each(function() {
      d3.select(this).transition()
        .duration(5000)
        .attrTween("stroke-dasharray", tweenDash)
        .ease(d3.easeLinear);
    })
  }
  
  var dataGroup = d3.nest()
    .key(function(d) {
      return d.group;
    })
    .entries(data);
  
  dataGroup.forEach(function(d, i) {
  
    var path = svg.append("path")
      .attr("d", line(d.values))
      .attr("stroke", colours[i])
      .attr("stroke-width", 1)
      .attr("fill", "none");
  
    transition(d3.selectAll("path"))
  
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>