javascript - 如何在 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);
    });