0

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?

Arash Howaida
  • 2,575
  • 2
  • 19
  • 50
  • 1
    Couple typos, you currently don't have date strings: `01/20/2020`, intead of `"01/20/2020"`, you also need to return a colour for the fill (they are black as you don't return any value). Lastly, a separate issue, to compare dates see [here](https://stackoverflow.com/q/492994/7106086). – Andrew Reid Feb 08 '21 at 04:54
  • @AndrewReid Yea, left out the `return` that was a big oversight. Fixed with your suggestion of `.getTime()` Thanks! – Arash Howaida Feb 08 '21 at 05:23

0 Answers0