Trouble passing in additional parameters in function

Question

I'm trying to write a function in d3 that will check the "time" of my data and see whether it is between two other times, and filter accordingly.

//start with a function to check if time for each data point is in between two other times
function timeInterval(data, start, end) {
    var time = data.Time

    if (start <= time <= end) {           
        return "inline";
    } else {
        return "none";
    };   
 }

//set the display of points to either inline or none
function updateTime(value) {
d3.selectAll(".events")
    .style("display", timeInterval("20:00", "24:00"));    
}


//When radio button on, call updateTime function
d3.selectAll("#timeFilterRadioButton").on("change", function() {
updateTime()
});

My issue is that I'm unable to call timeInterval with the start and end parameters. Calling timeInterval("20:00", "24:00") results in time being undefined. The only way I can successfully pass in the data is if I call the function without any parameters:

 function updateTime(value) {
     d3.selectAll(".events")
        .style("display", timeInterval); //calling timeInterval in this manner, I'm able to console.log the time property of the data   
 }

Where am I going wrong here?

Answer 1

Just use an anonymous function to get the data and wrap your timeInterval function in it:

function updateTime(value) {
    d3.selectAll(".events")
        .style("display", function(d) {
            //your datum is here---^
            return timeInterval(d, "20:00", "24:00")
            //use it here-------^
        });
};

Not related, but this:

if (start <= time <= end)

Will return true for all start <= time, regardless end.