Syntax for axis transition in svg/d3

问题:

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.

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.)

 
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);

var yy = makeYscale(plotMargin, thetas, xmf);

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)
}

Sorry I can't get this self-contained.

Is transition.select.("y axis").call(yAxis) correct? Is there anything glaringly off here?

---

Edit: To keep things simple, I now have

 // 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);

I'm wondering if something in the way I created the axis in the first place (in makeYaxis()) prevents me from selecting it properly. The yy 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."

回答1:

Following meetamit's suggestions and the example here, I have stumbled on what appears to be a solution.

First, in function makeYaxis(), I removed the line .append("g"). I also updated the class name to yaxis. The function now reads

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","yaxis") // note new class name
//  .append("g")
    .attr("transform","translate(60,1)") 
    .call(yAxis);
    // everything else as before
}

I then added an extra period in my call to select(".yaxis"):

chart.select(".yaxis").transition().duration(10).call(yAxis);

I would be very grateful if anyone could explain to me exactly why this solution appears to work.