根据过滤的D3.js数据禁用/启用下拉列表选项

Question

我有两个使用PHP从数据库动态填充的下拉列表。它们包含指定列的所有值，例如，一个包含parameterType的所有值，另一个包含dateTimeTaken的所有值。

当数据被过滤并且其中一些选项可能不再适用时，有没有办法禁用这些选项中的任何一个 - 基本上我问的是，当数据是否可以更新动态填充的下拉列表时，如果是，如何实现这一目标？

更新

我的数据采用以下格式：

 [{"dateTimeTaken":"2013-01-01 14:05:14",
   "reading":"0.90000",
   "parameterType":"Flouride",
   "inspectionPoint_id":"2"}....

我尝试使用以下代码执行此操作 - 但没有做任何事情？

 d3.json("HistoricData.php", function(error,data) 
 {
 var filtered_data = data.filter(function(d) { return d.inspectionPoint_id == i;})  
     filtered_data.forEach(function(d) {
     d.dateTimeTaken = parseDate(d.dateTimeTaken);
     d.reading = +d.reading;
     d.parameterType = d.parameterType;
     d.inspectionPoint_id = +d.inspectionPoint_id;      
 });

 var check = d3.select("selectparameter")//select dropdown list

 check.selectAll("option").each(checkOption);//select all options

 //for any of the options that don't match the parameterType's 
 //from the filtered dataset set display to none     
 var checkOption = function (d, e) {
 if(e !== d.values(d.parameterType)){
    return d3.select(this).attr("display", "none");
}
 };

更新2

 d3.select("#selectparameter")
    .append("select")
    .selectAll("option")
    .data(filtered_data)
    .enter().append("option")
    .text(function(d) { return d.parameterType; })

Answer 1

您可以使用常用的数据绑定/更新模式（请参阅例如this tutorial）来更新选项。

第一个调用（当你绑定数据时）看起来像

check.selectAll("option").data(data)
     .enter().append("option")
     ...

要进行更新，请使用

中的内容

var newOptions = check.selectAll("option").data(filtered_data);
newOptions.enter().append("option")
          ...
newOptions.exit().attr("display", "none");
newOptions.attr("display", "block");

请注意，默认情况下，d3通过相应数组中的索引匹配数据，在这种情况下可能不是您想要的。您可以使用可选的第二个参数来提供函数，例如

check.selectAll("option").data(filtered_data, function(d) { return d.inspectionPoint_id; });