title: d3.tree => transform does not seem to work
body: <p>I create a tree layout graph using d3js. The nodes are clickable to toggle showing the children. The child node should be inserted at a predefined position and then transitioned to the desired location. The problem is that the insertion coordinates are always off. When debugging with Firebug, it shows that directly after appending the new node its coordinates are x = 51.42857142857142 and y = 200.0 even though the line<br>
      <code>.attr("transform", "translate(90,100)" )</code> should alter them (I use fixed values here, to pin down the problem further.</p>
  
  <p>Where is my mistake?</p>
  
  <p>Full code:</p>
  
  <pre><code>// Toggle children.
  function toggle(d) {
     if (d.children) {
       d._children = d.children;
       d.children = null;
     } else {
       d.children = d._children;
       d._children = null;
    }
  } 
  
  function toggleAll(d) {
     if (d.children) {
        d.children.forEach(toggleAll);
        toggle(d);
     }
  }
  
  function update(source) {
     // Node movement delay
     var duration = d3.event &amp;&amp; 1500;
  
     // Compute the new tree layout.
     var nodes = tree.nodes(root).reverse();
  
     // Normalize for fixed-depth.
     nodes.forEach(function(d) { d.y = d.depth * 100; });
  
     // Update the nodes…
     var node = vis.selectAll("g.node")
       .data(nodes, function(d) { return d.id || (d.id = ++i); });
  
    // Enter any new nodes at the parent's previous position.
     var nodeEnter = node.enter().append("svg:g")
      .attr("class", "node")
      .attr("transform", "translate(90,100)" )
      .on("click", function(d) { toggle(d); update(d); });
  
    nodeEnter.append("svg:circle")
      .attr("r", 1e-6);
  
  
    // Transition nodes to their new position.
    var nodeUpdate = node.transition()
      .duration(duration)
      .attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; })
  
    nodeUpdate.select("circle")
      .attr("r", 4.5)
      .style("fill", function(d) { return d._children ? "red" : "#fff"; });
  
  
  
    // Transition exiting nodes to the parent's new position.
    var nodeExit = node.exit().transition()
       .duration(duration)
       .attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; })
      .remove();
  
   // While moving the nodes, they need to shrink
   nodeExit.select("circle")
     .attr("r", 1e-6);
  
  
      // Stash the old positions for transition.
      nodes.forEach(function(d) {
      d.x0 = d.x;
      d.y0 = d.y;
     });
  }
  
  
  var i = 0, root;
  var radius = 960 / 2;
  var tree = d3.layout.tree()
     .size([360, radius - 120]);
  var diagonal = d3.svg.diagonal.radial()
     .projection(function(d) { return [d.y, d.x / 180 * Math.PI]; });
  
  var vis = d3.select("#body").append("svg:svg")
     .attr("width", radius * 2)
     .attr("height", radius * 2 - 50)
     .append("g")
     .attr("transform", "translate(" + radius + "," + radius + ")");
  
  d3.json("flare.json", function(json) {
    root = json;
    root.x0 = 0;
    root.y0 = 0;
  
  
    // Initialize the display to show a few nodes.
    root.children.forEach(toggleAll);
    toggle(root.children[1]);
  
    update(root);
  });
  </code></pre>
  
  <p></p>