title: How do I translate d3.js nodes?
body: <p>I have a d3 force-directed graph that contains a group of nodes:</p>
  
  <pre><code>var node = vis.selectAll("g.node")
                .data(json.nodes)
                .enter().append("svg:g")
                .attr("class", "node")
                .attr("id", function(d) { return "node" + d.index; })
                .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
                .call(force.drag);
  </code></pre>
  
  <p>This renders fine.</p>
  
  <p>I'd now like to translate (move) these nodes 200 pixels to the right when I show a detail <code>div</code> with the id <code>detail_container</code>. </p>
  
  <p>I tried the following, but nothing happens to the nodes when I show <code>detail_container</code> (other than showing the detail <code>div</code>):</p>
  
  <pre><code>$('#detail_container').fadeIn('slow', function() {
      d3.selectAll("g.node").attr("transform", function(d) { return "translate(200, 0)"; });
  });
  </code></pre>
  
  <p>The <code>d3.selectAll("g.node")</code> statement contains the node data, which I can confirm by looking at the data in the console:</p>
  
  <pre><code>console.log(d3.selectAll("g.node"));
  </code></pre>
  
  <p>As another approach, I attached the zoom/pan behavior to my graph:</p>
  
  <pre><code>var vis = d3.select("#position")
              .append("svg:svg")
              .attr("width", w)
              .attr("height", h)
              .attr("pointer-events", "all")
              .append("svg:g")
              .call(d3.behavior.zoom().on("zoom", redraw))
              .append("svg:g");
  </code></pre>
  
  <p>This works fine. However, this interacts with the mouse, not with events that occur in my program, so is there a <em>programmatic</em> way to call the zoom/pan behavior, so that I can accomplish the translation I want?</p>