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

我无法理解和实现节点的过滤器功能。我的目标是仅显示特定节点（不透明度= 1），并让其他节点不可见（不透明度= 0）。这是下面的js小提琴和滤镜功能的一个片段。D3 - 如何用不透明度过滤正确的值？

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

似乎我无法理解的是，当 “不透明度= 0” 被取出，返回d;被换回;那么只有特定的节点出现，我不想发生。

下面是我想用来查看过滤节点的步骤。

单击所有（所以取消选中）
点击初恋（因此它被选中，因此表现出的过滤节点）

我需要看到的，我有特定的节点使用不透明度= 0并使用返回值d进行过滤;

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

来源

2016-10-03 helloGoodDay

看着这个，你还没有定义数据点之间的差异。所以所有的数据点都是第一个日期，第二个日期和所有日期。所以试图过滤之间没有工作，因为他们之间没有区别。除非我错过了一些东西，比如说第一天是什么日期？ – Craicerjack

@Craicerjack感谢您的回复。第一个日期是列表中的前5个日期。第二次日期只是前两次。如果你取出不透明度= 0并返回d;并用刚刚返回来替换它;你会看到不同之处。 – helloGoodDay

您不需要过滤，只需将选择器函数放在'.attr'的第二个参数中，但将用于管理复选框状态的所有逻辑移动到事件侦听器的外部范围中。您目前正在重新计算每个点的相同内容... –

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

来源

2016-10-04 00:43:52

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

回答

相关问题