title: Syntax for axis transition in svg/d3
body: <p>I've an incredibly basic syntax question. I've been learning d3, SVG, and Javascript mostly by editing someone else's code, which is challenging.</p>
  
  <p>The goal is to update a y axis after updating the data and the scale, which is based on the data. I want the axis--ticks and labels and all--to transition with the domain of the data. The axis isn't getting updated. The problem might be related to scope, or I'm referencing the wrong SVG element. (There are actually several plots getting updated simultaneously, but I'm just focusing on the axis of one of them here.) </p>
  
  <p><pre> <code>
  function makeYaxis (chart, scale, nticks, label, width, height, xmf, visName)
  {
      var yAxis = d3.svg.axis()
      .scale(scale)
      .orient("left")
      .ticks(nticks);
      chart.append("svg:g")
      .attr("class","y axis")
      .append("g")
      .attr("transform","translate(60,1)") // fix magic #
      .call(yAxis);
      var xMove = xmf.yylMarginFactor * width - 1;
      var yMove = (((1 - xmf.xxbMarginFactor) * height + 
            xmf.xxtMarginFactor * height) / 2);
      chart.append("svg:text")
      .attr("class", visName + "xLabel")
      .attr("x", 0)
      .attr("y", 0)
      .attr("dy", "-2.8em")
      .text(label)
      .attr("transform", "rotate(-90) translate(-" + yMove + "," + xMove + ")");
  }
  function makeYscale (plotMargin, thedata, xmf)
  {
      var dataMin = d3.min(thedata[0]);
      var dataMax = d3.max(thedata[0]);
      var yyMargin = d3.max([plotMargin * (dataMax - dataMin),0.05]);
      var yy = d3.scale.linear()
      .domain([dataMin - yyMargin, yyMargin + dataMax])
      .range([(1 - xmf.xxbMarginFactor) * height, xmf.xxtMarginFactor * height]);
      return yy;
  }
  // Set up this visualization
  var chart = d3.select("#vis1")
    .append("svg:svg")
    .attr("class", "vis1chart")
    .attr("width", width)
    .attr("height", height);<br>
  var yy = makeYscale(plotMargin, thetas, xmf);<br>
  makeYaxis(chart, yy, nYTicks, "parameter", width, height, xmf, "vis1");
  var points = chart.selectAll("circle.vis1points")
      .data(thetas)
      .enter().append("svg:circle")
      .attr("class", "vis1points")
      .attr("cx", function (d, i) { return xx(i); })
      .attr("cy", function (d, i) { return yy(d); })
      .attr("r", 3);
  points.transition()
      .attr("cx", function (d, i) { return xx(i); })
      .attr("cy", yy)
      .duration(dur);
  vis1move();
  function vis1move ()
  {
      function movePoints ()
      { 
      var tmp = chart.selectAll(".vis1points").data(thetas[0], function (d, i) { return i; } );
      var opa1 = points.style("stroke-opacity");
      var opa2 = points.style("fill-opacity");
      tmp
          .enter().insert("svg:circle")
          .attr("class", "vis1points")
          .attr("cx", function (d, i) { return xx(i); })
          .attr("cy", yy)
          .attr("r", 3)
          .style("stroke-opacity", opa1)
          .style("fill-opacity", opa2);
      tmp.transition()
          .duration(10)
          .attr("cx", function (d, i) { return xx(i); })
      tmp.exit()
          .transition().duration(10).attr("r",0).remove();
      };
      // (Code for updating theta, the data, goes here)
      // Update axes for this vis
      yy = makeYscale(plotMargin, thetas, xmf);
      var transition = chart.transition().duration(10);
      var yAxis = d3.svg.axis()
          .scale(yy)
          .orient("left")
          .ticks(4);
      transition.select("y axis").call(yAxis);
      movePoints(); // Previously had been before axis update (fixed)
  }
  </pre> </code></p>
  
  <p>Sorry I can't get this self-contained.</p>
  
  <p>Is <code>transition.select.("y axis").call(yAxis)</code> correct? Is there anything glaringly off here?</p>
  
  <hr>
  
  <p><em>Edit:</em> To keep things simple, I now have</p>
  
  <p><pre><code> // Update axes for this vis
      yy = makeYscale(plotMargin, thetas, xmf);
      var yAxis = d3.svg.axis().scale(yy);
      chart.select("y axis").transition().duration(10).call(yAxis);
  </pre></code></p>
  
  <p>I'm wondering if something in the way I created the axis in the first place (in <code>makeYaxis()</code>) prevents me from selecting it properly. The <code>yy</code> function is returning the right values under the hood, and the data points are getting plotted and rescaled properly. It's just that the axis is "stuck."</p>