title: D3.js v4.0.0-alpha.35 Transitions not working
body: <p>I try to mimic this <a href="https://bl.ocks.org/mbostock/4339083" rel="nofollow">collapsible tree</a> using the newest version of d3.js, however I am running into some issues.</p>
  
  <p>The <code>nodeEnter</code> part of the code is executing just fine but for whatever reason the <code>nodeUpdate</code> aka the transition part of the code will not execute. I look in the console to make sure it wasn't just a visibility issue, I get no errors, nothing... The coordinates stay the same as they were when they were initiated by the <code>nodeEnter</code> portion of the code.
  My only guess is that something changed with the new version of d3.js and I am missing something...</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 t = d3.transition()
  .duration(750)
  .ease(d3.easeLinear);
  
  var tree = d3.tree()
    .size([height, width]);
  
  function updateDisplay(source){
    
    var treeData = tree(root).descendants(),
        linkData = treeData.slice(1); 
    
    treeData.forEach(function(d) {
      
      /*Normalize for fixed-depth between levels, so that y value 
      **  stays the same through transition as opposed to being 
      **  an even division of the svg width. */
      d.y = d.depth *180;
      
    });
    
                              
    var node = svg.selectAll("g.node")
                  .data(treeData);
  
    var nodeEnter = node.enter()
                        .append("g")
                          .attr("class", function(d) {return "node" + (d.children ? " node--internal" : " node--leaf");})
                          .attr("transform", function(d) {return "translate(" + source.y0 + "," + source.x0 + ")";});
    
    console.log(nodeEnter);
    
    nodeEnter.append("rect")
              .attr("x", 3)
              .attr("y", -10)
              .attr("rx", 1e-6)//goes to 8 after transition
              .attr("ry", 1e-6)//goes to 8 after transition
              .attr("width", 1e-6)
              .attr("height", 1e-6)
              .attr("transform", function(d) {return d.children ? "scale(-1,1) translate(-20,0)" : "";})
              .attr("style", "fill:#EEEEEE;filter:url(#dropshadow)");
  
    nodeEnter.append("text")
              .attr("dy", 3)
              .attr("x", function(d) {return d.children ? -8 : 30;})
              .style("text-anchor", function(d) {return d.children ? "end" : "start";})
              .text(function(d) {return d.id;})
              .each(function(d) {d.NameWidth = this.getBBox().width;})
              .style("fill-opacity", 1e-6);
    
  
    var avatar = nodeEnter.append("g").attr("style", "filter:url(#dropshadow)");
  
    avatar.append("clipPath")
            .attr("id", "avatarClip")
            .append("circle")
              .attr("cx", 1e-6)//12.5
              .attr("cy", 1e-6)//12.5
              .attr("r", 1e-6);//12.5
  
    avatar.append("circle")
            .attr("cx", 1e-6)//12.5
            .attr("cy", 1e-6)//12.5
            .attr("r", 1e-6)//12.5
            .attr("style", "fill:white")
            .attr("transform", "translate(0,-12)");
  
    avatar.append("image")
            .attr("xlink:href", function(d) {return (d.data.img ? d.data.img : "https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-342/ic_person_black_48px.svg");})
            .attr("clip-path", "url(#avatarClip)")
            .attr("class", function(d) {return (d.children ? "avatar--manager" : "");})
            .attr("width", 25)
            .attr("height", 25)
            .attr("transform", "translate(0,-12)");  
    
    avatar.on("click", function(d) {toggle(d);});
    
    //TRANSITION OF NODES TO NEW POSITIONS
    var nodeUpdate = node.transition(t)
                          .attr("class", function(d) {return "node" + (d.children ? " node--internal" : " node--leaf");})
                          .attr("transform", function(d) {return "translate(" + d.y + "," + d.x + ")";});
    
    nodeUpdate.select("text")
      .attr("x", function(d) {return d.children ? -8 : 30;})
      .style("text-anchor", function(d) {return d.children ? "end" : "start";})
      .text(function(d) {return d.id;})
      .style("fill-opacity", 1);
  
    nodeUpdate.select("rect")
                .attr("transform", function(d) {return d.children ? "scale(-1,1) translate(-20,0)" : "";})
                .attr("height", 20)
                .attr("width", function(d) {return (d.NameWidth + 35);});
    
    nodeUpdate.select("clipPath")
                .attr("cx", 12.5)
                .attr("cy", 12.5)
                .attr("r", 12.5);
    
    nodeUpdate.select("circle")
               .attr("cx", 12.5)
               .attr("cy", 12.5)
               .attr("r", 12.5);
  
    nodeUpdate.select("image")
      .attr("xlink:href", function(d) {return (d.data.img ? d.data.img : "https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-342/ic_person_black_48px.svg");})
      .attr("clip-path", "url(#avatarClip)")
      .attr("class", function(d) {return (d.children ? "avatar--manager" : "");});
    
    //TRANSITIONING EXITING NODES
    var nodeExit = node.exit()
                       .transition(t)
                       .attr("transform", function(d) {return "translate(" + source.y + "," + source.x + ")";})
                       .remove();
    
    
   
    /*var link = svg.selectAll(".link")
                   .data(linkData);*/
    
  
    // Stash the old positions for transition.
     root.each(function(d) {
      d.x0 = d.x;
      d.y0 = d.y;
    });
    
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>PS: My code isn't an exact replica of the link above, I put my own spin when it came to design...</p>