为什么我保存的D3选择在某些情况下没有效果？ [英] Why does my saved D3 selection have no effect in some cases?

问题描述

我很困惑如何保存D3选择以供以后使用。在下面的代码中，我有一个全局变量为我的轴，我保存他们第一次创建时。后来，我可以使用这个变量的某些东西（这里，设置一些文本），而不是其他人（这里，更新比例），只有当我显式（重新）选择轴。

I'm confused about how to save a D3 selection for later use. In the code below, I have a "global" variable for my axes, to which I save them when they are first created. Later, I'm able to use this variable for certain things (here, setting some text) but not others (here, updating the scale), which only work if I explicitly (re)select the axes.

有没有可能有一些关于JavaScript变量范围或生命周期，我不明白？

Is there perhaps something about JavaScript variable scoping or lifetime that I don't understand? Any assistance is appreciated!

相关代码，从完整上下文：

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

并将文本因为它是最后附加的。

如果您想要轴，请在编辑文本之前将轴保存为选择。

And saves the text to the selection, because it was appended last.
If you want the axis, save the axis to the selection before you edit the 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");

这篇关于为什么我保存的D3选择在某些情况下没有效果？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！