D3, get X values (date) from multiple Y values, create text - d3.js

Question

I have searched through many answers about getting X (date) values given a Y. Most revolve around the scale.invert() function. However, I am having trouble implementing this in my task.
Task: I am creating a hydrograph (time-series line graph of water level). I'm also plotting min/max points, and median line, all with text labels. See first image. This is a 'proof of concept', so I'm ok with things being a little dirty.
Problem: I want to add the corresponding dates for those min/max points, and I can't figure out how. One caveat, sometimes there are multiple points with same min or max value. I am unable to: A) get the correct date for the point, and B) add the date for each instance (all mins and maxes, if there are multiples) to the text. Thanks for any help or direction.
Some of the code (that I think is immediately relevant) is below. Here's the codepen. I'm sure it's not pretty, I'm new to D3 and javascript.
...
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Water Level (ft)");
svg.append("path")
.datum(data)
.attr("class", "line")
.attr("d", line);
var extent = d3.extent(data, function(d) {
return d.level
})
var min = extent[0]
var max = extent[1]
var median = d3.median(data, function(d) {
return d.level
})
var medianLine = svg.append("line")
.attr("class", "medianLine")
.attr("y1", y(median))
.attr("y2", y(median))
.attr("x1", 0)
.attr("x2", width)
var points = svg.selectAll("g")
.data(data)
.enter()
.append("g")
.filter(function(d) {
return d.level === min || d.level === max;
})
points.append("circle")
.attr("class", "dot")
.attr("cx", function(d) {
return x(d.date);
})
.attr("cy", function(d) {
return y(d.level);
})
.attr("r", 5)
points.append("text")
.attr("x", function(d) {
return x(d.date);
})
.attr("y", -20)
.attr("font-family", "sans-serif")
.attr("font-size", "12px")
.style("text-anchor", "middle")
points.selectAll("circle")
.style("fill", function(d) {
if (d.level === min) {
return "red"
} else {
return "#009933"
};
});
points.selectAll("text")
.text(function(d) {
if (d.level === min) {
return "Min: " + min
} else if (d.level === max) {
return "Max: " + max
}
})
.style("fill", function(d) {
if (d.level === min) {
return "red"
} else if (d.level === max) {
return "#246B24"
}
})
svg.append("text")
.attr("transform", "translate(" + (width + 3) + "," + y(median) + ")")
.attr("dy", ".35em")
.attr("text-anchor", "start")
.style("fill", "#cc6600")
.text(function(d) {
return "Median: " + median
})
...

Answer 1

Well after a quick peek to the code the date is a property of your data so there should not be any problem accessing it e.g.
points.selectAll("text")
.text(function(d) {
// date is accessible through d.date
if (d.level === min) {
return "Min: " + min + ' ' + d.date
} else if (d.level === max) {
return "Max: " + max + ' ' + d.date
}
})
If you want to format the date you can read about time formatting in d3