Почему мой сохраненный выбор D3 не действует в некоторых случаях?

Я запутался в том, как сохранить выбор D3 для дальнейшего использования. В приведенном ниже коде у меня есть «глобальная» переменная для моих осей, в которую я сохраняю их при первом создании. Позже я могу использовать эту переменную для определенных вещей (здесь, настройка некоторого текста), но не для других (здесь, обновление масштаба), которые работают, только если я явно (повторно) выбираю оси.

Есть ли что-то в области видимости переменных JavaScript или времени жизни, которые я не понимаю? Любая помощь приветствуется!

Соответствующий код, сильно сжатый изполный контекст:

// Top level of page

var gxaxis, gyaxis;

var updatePlot = function (view, first) {

    d3.csv("data.csv", function (error, data) {
        data.forEach(function (d) {
            ...
        });

        var x, y;
        x = d3.scale.linear().range(...);
        y = d3.scale.linear().range(...);

        x.domain(d3.extent(data, function (d) {...})).nice();
        y.domain(d3.extent(data, function (d) {...})).nice();

        var xAxis = d3.svg.axis().scale(x).orient("bottom");
        var yAxis = d3.svg.axis().scale(y).orient("left");

        // The variable 'first' is true on page load, so this code the if clause will be executed before any executions of the else clause
       if (first) {
            gxaxis = svg.append("g").attr("class", "x axis")
                    .attr("transform", "translate(0," + height + ")")
                    .call(xAxis)
                    .append("text")
                    .attr("class", "label")
                    .attr("x", width)
                    .attr("y", -6)
                    .style("text-anchor", "end");
            gyaxis = svg.append("g").attr("class", "y axis")
                    .call(yAxis)
                    .append("text")
                    .attr("class", "label")
                    .attr("transform", "rotate(-90)")
                    .attr("y", 6)
                    .attr("dy", ".71em")
                    .style("text-anchor", "end");
        } else {
            // Why is it necessary to explicitly select; why can't I use my gxaxis variable (as I do below for the text)?
            svg.select(".x.axis")
                    .transition().duration(0).ease("in")
                    .call(xAxis);
            // Using gyaxis.transition()... has NO EFFECT
            svg.select(".y.axis")
                    .transition().duration(0).ease("in")
                    .call(yAxis);

        }

        var xLabel = ...;
        var yLabel = ...;

        // This use of gxaxis works.
        gxaxis.text(xLabel);
        gyaxis.text(yLabel);

    });

};

// Set up handlers for switching among views
d3.selectAll(".view-select").on("click", function () {
    d3.event.preventDefault();
    updatePlot(this.id, false);
});

updatePlot('a', true);

Ответы на вопрос(1)

Ваш ответ на вопрос