页面加载时未勾选CSS切换开关，D3 SVG类元素默认显示的解决方法

我用CSS切换开关通过类名控制d3.js路径对象的可见性，其他开关功能都正常，但其中一个开关希望页面加载时处于未勾选状态（对应元素隐藏）。现在页面加载时开关确实是未勾选的，但对应元素却显示着；手动勾选再取消后，元素能正常隐藏。怎么实现页面初始加载时就隐藏该元素？

相关代码 #

HTML代码 #

<tr>
    <td><label class="switch">
            <input id="toggle_min" type="checkbox" >
            <div class="slider"></div>
    </label></td>
</tr>

JavaScript代码 #

function ready(error, topo) {
                
    svg.append("g")
        .attr("class", "min")
        .selectAll("path")
        .data(topo.features)
        .enter()
        .append("path")
        .attr("d", d3.geoPath()
            .projection(projection)
        )
        .attr("stroke", "grey")
        .attr("stroke-width", 2);
}

var min_Checkbox = document.querySelector('input[id="toggle_min"]');

min_Checkbox.onchange = function() {
    if (this.checked) {
        d3.selectAll(".min").attr("visibility", "visible");
    } else {
        d3.selectAll(".min").attr("visibility", "hidden");
    }
};

有三种简单的方法可以解决这个问题：

方法一：创建元素时直接设置初始隐藏状态 #

在创建.min对应的<g>元素时，直接添加visibility: hidden属性，让元素一开始就处于隐藏状态，和开关的未勾选状态对应。修改后的ready函数如下：

function ready(error, topo) {
                
    svg.append("g")
        .attr("class", "min")
        .attr("visibility", "hidden") // 初始设置为隐藏
        .selectAll("path")
        .data(topo.features)
        .enter()
        .append("path")
        .attr("d", d3.geoPath()
            .projection(projection)
        )
        .attr("stroke", "grey")
        .attr("stroke-width", 2);
}

方法二：页面加载后触发一次开关的change事件 #

绑定开关的onchange事件后，手动触发一次该事件，让代码执行一次隐藏逻辑（因为开关初始未勾选，会进入else分支）。修改后的JS代码如下：

var min_Checkbox = document.querySelector('input[id="toggle_min"]');

min_Checkbox.onchange = function() {
    if (this.checked) {
        d3.selectAll(".min").attr("visibility", "visible");
    } else {
        d3.selectAll(".min").attr("visibility", "hidden");
    }
};

// 触发change事件，同步初始状态
min_Checkbox.dispatchEvent(new Event('change'));

方法三：用CSS默认隐藏目标元素 #

在CSS中直接设置.min类的元素默认隐藏，这样页面加载时元素就不会显示，开关勾选后再通过JS修改为可见：

.min {
    visibility: hidden;
}

这三种方法都能解决问题，你可以根据自己的代码结构选择最适合的方式。

内容的提问来源于stack exchange，提问作者organon