如何在 d3.js 中编写复选框 checked/unchecked 行为

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 比较陌生，不知道如何进行这项工作。

这是我目前拥有的。此代码部分工作 - 默认情况下选中复选框，当用户取消选中它时，选定的数据点变得透明。但是，任何后续 checks/unchecks 都不会执行任何操作 - 代码只是指示浏览器继续将不透明度更改为 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);
    });

如何在 d3.js 中编写复选框 checked/unchecked 行为

How to code checkbox checked/unchecked behavior in d3.js

javascript

checkbox

d3.js