I'm trying to show the year on the X axis for the current point I am mousing over on my chart. similar to how it is here: http://www.nytimes.com/interactive/2012/11/30/us/tax-burden.html?_r=0
Here is what I'm working on: jsfiddle.net/Rlightner/u3H8h/
I have set the X axis display to none: to hide the whole x axis initially, (canvasMarket is the variable for my svg):
var xAxisDisplay = canvasMarket.append("g")
.attr("class", "xaxis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.style("display", "none");
Then I've also appended a rectangle (with "fill": "none" and "pointer-events": "all" as the "overlay" class) to canvasMarket with mouseover, mousemove, and mouseout methods, each calling a respective a function:
canvasMarket.append("rect")
.attr("class", "overlay")
.attr("transform", "translate("+-tickPadding+",0)")
.attr("width", width+(tickPadding*2))
.attr("height", height)
.on("mouseover", mouseover).on("mouseout", mouseout).on("mousemove", mousemove);
I've also created a mousemove function thate gets the value (d) closest to the mouse, I was trying to use d to reveal the current X value... by using something like xScale(d.date) to select the current X axis date
bisectDate = d3.bisector(function(d) { return d.date; }).left,
function mousemove() {
var x0 = xScale.invert(d3.mouse(this)[0]),
i = bisectDate(data, x0, 1),
d0 = data[i - 1],
d1 = data[i],
d = x0 - d0 > d1 - x0 ? d1 : d0;}
thanks in advance for help!