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);
    });

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

1 个答案: