Question

我无法理解和实现节点的过滤功能。我的目标是仅显示特定节点（opacity = 1）并让其他节点不可见（opacity = 0）。下面是js fiddle以及过滤函数的片段。

d3.selectAll(".filterBtn").on("change", function() {
    var type = this.value,
    opacity = this.checked ? 1 : 0,
    aDates = d3.select("#allDates").node().checked,
    fDate = d3.select("#fDates").node().checked,
    sDate = d3.select("#sDates").node().checked;

    svg.selectAll(".item").filter(function(d) {
        if(type === "aD") {
            if(aDates) {
                document.getElementById("fDates").checked = true;
                document.getElementById("sDates").checked = true;
                return d;
            } else {
                document.getElementById("fDates").checked = false;
                document.getElementById("sDates").checked = false;
                return d;
            }
        } else if(type === "fD") {
            var d1 = new Date(parseDate("1988-01-01"));
            var d2 = new Date(parseDate("1988-01-02"));
            var d3 = new Date(parseDate("1988-01-03"));
            var d4 = new Date(parseDate("1988-01-04"));
            var d5 = new Date(parseDate("1988-01-05"));

            if(d - d1 === 0 || d - d2 === 0 || d - d3 === 0 || d - d4 === 0 || d - d5 === 0) {
                if(fDate) {
                    opacity = 1;
                } else {
                    opacity = 0;
                }
                return d;
            } else {
                //Other nodes <-- I don't want to show them
                //RETURN STATEMENT 1
                opacity = 0;
                return d;
            }

        } else {
            var d1 = new Date(parseDate("1988-01-01"));
            var d2 = new Date(parseDate("1988-01-02"));
            if(d - d1 === 0 || d - d2 === 0) {
                if(sDate) {
                    opacity = 1;
                } else {
                    opacity = 0;
                }
                return d;
            } else {
                //Other nodes <-- I don't want to show them
                //RETURN STATEMENT 2
                opacity = 0;
                return d;
            }
        }
    })
    .attr("opacity", opacity);
});

我似乎无法理解的是，当“opacity = 0”被取出并返回d时;被回归取代;然后只出现特定节点，我不想发生这种情况。

以下是我希望用来查看已过滤节点的步骤。

点击全部（以便取消选中）
点击“第一个日期”（以便进行检查，从而显示已过滤的节点）

我需要看到的是我在使用opacity = 0并使用return d时过滤的特定节点;

如果有其他方法可以做到这一点，请给我建议。谢谢！

Answer 1

您的问题的答案是，您不需要使用.filter，您使用Dynamic Properties的内置功能。 .attr方法中的第二个参数可以是一个函数，它将传递绑定到选择的每个元素的基准，以便您可以有条件地设置属性，作为基准的函数。

D3 - 如何使用不透明度过滤正确的值？

1 个答案: