I have a calendar orientation of rects appended. Each rect has a .datum()
that is simply a date, like: 08/20/2020
. There is one rect for each day of the year.
Separately, I have a shorter array of objects that contain dates in their values. For example:
var dateData = [
{day:01/20/2020},
{day:04/21/2020},
{day:08/20/2020}
];
I want to cross-reference dataData
when I append and style the rects during creation so that the rects whose dates are contained in dateData
are blue and those not within that array of objects are gray. Here is my attempt:
var rect = svg.selectAll("rect.day")
.data(function(d, i) { return d3.timeDays(d, new Date(d.getFullYear(), d.getMonth()+1, 1)); })
.enter().append("rect")
.attr("class", "day")
.attr("width", cellSize)
.attr("height", cellSize)
.attr("rx", 3).attr("ry", 3) // rounded corners
.style('fill', function(d) {dateData.filter(e => new Date(e.day) === d).length > 0 ? "#003366":"#d9d9d9"})
//.attr("fill", '#eaeaea') // default light grey fill
.attr("y", function(d) { return (day(d) * cellSize) + (day(d) * cellMargin) + cellMargin; })
.attr("x", function(d) { return ((week(d) - week(new Date(d.getFullYear(),d.getMonth(),1))) * cellSize) + ((week(d) - week(new Date(d.getFullYear(),d.getMonth(),1))) * cellMargin) + cellMargin ; })
However, this resulted in all rects rendering as black.
No errors thrown.
Question
Is my approach fundamentally flawed, and is there a way to remedy the logic?