如何在 d3.js 中编码复选框选中/未选中的行为

Question

我正在使用 D3 制作散点图。我有以下功能，允许用户使用复选框过滤掉某些点：

    //un-optimized code, works fine
    d3.selectAll("[name=v]").on("change", function() {
        var selected = this.value;
        display = this.checked ? "inline" : "none";

    svg.selectAll(".dot")
        .filter(function(d) {return selected == d.holidays;}) //returns 1 or 0
        .attr("display", display);
        }); 

此函数使用"display" 属性来显示点。但是我在图表上有很多点，并且在取消检查和重新检查后再次显示这些点在较慢的机器上需要时间。

我试图通过在未选中时将不透明度更改为 0 来优化它，反之亦然。但是我对 D3 比较陌生，不知道如何进行这项工作。

这是我目前拥有的。此代码部分工作 - 默认情况下选中该复选框，当用户取消选中它时，所选数据点变得透明。然而，任何后续的检查/取消检查都不会做任何事情——代码只是指示浏览器继续将不透明度更改为 0。

    d3.selectAll("[name=v]").on("change", function() {
        var selected = this.value;
        display = this.checked ? "inline" : "none";

    svg.selectAll(".dot")
        .filter(function(d) {return selected == d.holWkend;})
        .style("opacity", 0);
        }); 

所以上面的代码使选中的点在未选中复选框时不可见。 当重新选中复选框时，为了将所选点的不透明度再次更改为 1，我缺少什么？

这里是对应的复选框 HTML 代码供参考（包括一些自定义 CSS 复选框样式）

   <input type="checkbox" id="switch-id" name="v" value="0" checked>
   <label for="switch-id">Holiday</label>
   <span class="fh-switch-knob"></span>

   <input type="checkbox" id="switch-id" name="v" value="0" checked>
   <label for="switch-id">Non-holiday</label>
   <span class="fh-switch-knob"></span>

谢谢！

Answer 1

您需要做的就是使用与display 完全相同的代码来设置opacity：

d3.selectAll("[name=v]").on("change", function() {
    var selected = this.value;
    opacity = this.checked ? 1 : 0;

svg.selectAll(".dot")
    .filter(function(d) {return selected == d.holWkend;})
    .style("opacity", opacity);
    });