CODEWITHSUNDEEP
d3.js
Newbie
Newbie

Reputation: 177

disable/enable dropdown list options based on filtered D3.js data

I have two dropdown lists that are dynamically populated from a database using PHP. They contain all values for a specified column e.g one contains all values for parameterType and the other all values for dateTimeTaken.

Is there any way to disable any of these options when the data is filtered and some of these options may no longer be applicable - basically I'm asking if dynamically populated dropdown lists can be updated when the data is, if so, how this can be accomplished?

UPDATE:

My data is in following format:

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

and I've attempted to do this using following code - but not doing anything??

 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

Upvotes: 0

Views: 2060

Answers (1)

Lars Kotthoff
Lars Kotthoff

Reputation: 109292

You can use the usual data binding/update pattern (see e.g. this tutorial) to update you options.

The first call (when you're binding the data) would look something like

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

To update, use something along the lines of

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

Note that by default d3 matches data by the index in the respective array, which is probably not what you want in this case. You can use the optional second argument to supply a function, e.g.

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

Upvotes: 1

Related Questions