基於已篩選的D3.js數據禁用/啓用下拉列表選項

我有兩個下拉列表，這些列表使用PHP從數據庫動態填充。它們包含指定列的所有值，例如其中包含parameterType的所有值和dateTimeTaken的其他所有值。基於已篩選的D3.js數據禁用/啓用下拉列表選項

有什麼辦法可以禁用這些選項時，數據被過濾，其中一些選項可能不再適用 - 基本上我問是否動態填充下拉列表可以更新數據時，如果是這樣，這可以如何實現？

UPDATE：

我的數據是在以下格式：

[{"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"); 
} 
};

UPDATE 2

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

enter image description here

來源

2013-03-17 Newbie

這可能是有幫助的：http://stackoverflow.com/questions/13097923/how-can-i-use-d3-or-just-javascript-to-set-a-form-option- as-being-selected- – 2013-03-17 14:57:18

謝謝你 - 這告訴我，有可能但不知道如何實現我所需要的。我已經嘗試過了 - 請參閱上面的更新。 – Newbie 2013-03-17 16:10:12

可以使用通常的數據綁定/更新模式（參見例如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; });

來源

2013-03-17 16:21:31

謝謝 - 與我現有的下拉列表不太一樣 - 所以採用了另一種路線並使用D3附加了下拉列表 - 參見上面的更新2。他們正在填充正確的數據，但爲數組中的每個相關parameterType添加一個選項，而不是爲每個不同的parameterType添加一個選項？ – Newbie 2013-03-17 18:27:05

不確定你的意思。我認爲最好的方法是首先爲所有數據添加選項，然後像我在答案中概述的那樣過濾。 – 2013-03-17 18:40:39

見上圖。過濾器操作通過檢查點過濾原始數據 - 然後下拉列表需要描述該檢查點內的每個參數類型。在這種情況下，它是Flouride，因此除了事實之外，還有一個選項被添加到數組中的每個Flouride的下拉列表中，而不是僅顯示一次？您的方法非常完美，但是如何才能讓下拉菜單顯示Flouride，例如，一次？ – Newbie 2013-03-17 18:53:50

基於已篩選的D3.js數據禁用/啓用下拉列表選項

回答

相關問題