How do I make a tooltip show the amount in D3 grouped bar charts?

Question

I have 5 years of data for a grouped bar chart that includes two variables per year. When I mouseover each bar, I want it to show the specific value for that bar. But I'm not sure how to style the tooltip at the very bottom of my code to show the actually amount in my CSV when I mouse over the bar.

I want the specific dollar amount in my CSV to show up where I have "amount here" written below. I'm able to get the dollar sign in that text to show up, just not pull any data from my CSV.

    var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 600 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var x0 = d3.scale.ordinal()
    .rangeRoundBands([0, width], .1);

var x1 = d3.scale.ordinal();

var y = d3.scale.linear()
    .range([height, 0]);

var color = d3.scale.ordinal()
    .range(["#98abc5", "#7b6888"]);

var xAxis = d3.svg.axis()
    .scale(x0)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .tickFormat(d3.format(".2s"));

var svg = d3.select(".chart").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

$(document).ready(function() {

});

d3.csv("data/data.csv", function(error, data) {
  var restAmt = d3.keys(data[0]).filter(function(key) { return key !== "year"; });

data.forEach(function(d) {
    d.totalrest = restAmt.map(function(name) { return {name: name, value: +d[name]}; });
  });

  x0.domain(data.map(function(d) { return d.year; }));
  x1.domain(restAmt).rangeRoundBands([0, x0.rangeBand()]);
  y.domain([0, d3.max(data, function(d) { return d3.max(d.totalrest, function(d) { return d.value; }); })]);

var year = svg.selectAll(".year")
      .data(data)
      .enter().append("g")
      .attr("class", "g")
      .attr("transform", function(d) { return "translate(" + x0(d.year) + ",0)"; });

//draw X axis
  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

//draw Y axis
  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("Millions of Dollars");

  year.selectAll("rest")
      .data(function(d) { return d.totalrest; })
    .enter().append("rect")
      .attr("width", x1.rangeBand())
      .attr("x", function(d) { return x1(d.name); })
      .attr("y", function(d) { return y(d.value); })
      .attr("height", function(d) { return height - y(d.value); })
      .style("fill", function(d) { return color(d.name); })

      .on("mouseover", function(){return tooltip.style("visibility", "visible"); })
       .on("mousemove", function(){return tooltip.style("top", (event.pageY-120)+"px").style("left",(event.pageX-120)+"px"); })
        .on("mouseout", function(){return tooltip.style("visibility", "hidden");} )

 var tooltip = d3.select(".chart")
  .append("g")
  .style("position", "absolute")
  .style("z-index", "0")
  .style("visibility", "hidden")
  .text(function(){
  return '$'+"amount here"
      })

Answer 1

here just guess your amount field in csv is called amount, use d.amount as an example below:

You can add parameter d in 'mouseover' event, and bind the amout value into tooltip element as html element:

var div = d3.select('body').append('div')   
    .attr('class', 'tooltip')               
    .style('opacity', 0);

year.selectAll("rest")
...
.on('mouseover', function(d) {      
        div.transition()        
            .duration(200)      
            .style('opacity', .9);      
        div.html('<h3>' + d.amount + '</h3>' + '<p>' + d.amount + '</p>')  
            .style('left', (d3.event.pageX) + 'px')     
            .style('top', (d3.event.pageY - 28) + 'px');    
        })           

Answer 2

For one thing, see if you can create a minimal complete verifiable example. I couldn't manage to get you code running so I'm guessing here.

Just by looking though, when you set the text on the tooltip, see if data is bound such that you can just pass it in.

.text(function(d){
      return '$'+d // or d.whatever
 })

If that fails, you should be able to pull the same trick with .on just above, and pass that data to a function that creates the tooltip.

That being said, I get the sense that you may be hiding and showing every tooltip. If that's the case, and the data are bound to the tooltips, you can create a tooltip function that takes in indx and then call .style("visibility", function(d,i){return i === indx ? null : "hidden") which will unhide only the tooltip of indx. You can run the function with -1 at the start of execution to hide all tooltips. Alternatively, just create the tooltip when you need it rather than toggle its visibility.