Anton Anton - 3 months ago 8
Javascript Question

How to pass the tick value on to the tooltip

I have a bar chart with a time scale along X axis.

var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.tickFormat(RU.timeFormat("%b %Y"));


I need to pass these time values on to the tooltips for every bar. Here's my fiddle: https://jsfiddle.net/anton9ov/L9bkeypo/

Answer

Get the tick value like this:

.on("mouseover", function(d, i) {
    //here i is the index of the bar
    //selecting the text with the index    
    var tickValue = d3.select(d3.selectAll(".axis .tick text")[0][i]).text();

Display in the tooltip like this:

d3.select("#tooltip" )
    .style("left" , xPosition + "px")
  .style("top" , yPosition + "px")
  .select("#label")
  .text(tickValue); 

working code here