javascript 사용법 내 저장된 D3 선택이 어떤 경우 효과가없는 이유는 무엇입니까?



d3.v4.min.js download (1)

나중에 사용하기 위해 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);

이 코드 :

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

이 DOM을 만듭니다.

<svg>
    <...>
        <g class="x axis">
            <g class="tick">
                <line ...>
                <text ...>
            </g>
        </g>
    </...>
</svg>

마지막에 추가 되었기 때문에 text 를 선택 항목에 저장합니다.
축을 원한다면 텍스트를 편집하기 전에 축을 선택 항목에 저장하십시오.

gxaxis = svg.append("g").attr("class", "x axis")
                .attr("transform", "translate(0," + height + ")")
                .call(xAxis);
gxaxis.selectAll("text")
                .attr("class", "label")
                .attr("x", width)
                .attr("y", -6)
                .style("text-anchor", "end");




lifetime