Circles on top of bar chart d3.js

Question

I am making grouped bar chart based on Mike Bostock's tutorial.

I can't figure out how to put circles on top of my bars to act as tooltip when hovering, just like in this tutorial except it's on bars and not on a line.

I tried appending the circles like this :

svg.selectAll("dot")    
    .data(data)         
.enter().append("circle")                               
    .attr("r", 5)       
    .attr("cx", function(d) { return x1(d.name); })      
    .attr("cy", function(d) { return y(d.value); })         
    });

But I get NaN values. I am very confused about which variable I should use to get the right cx and cy.

Here is my code .

Any ideas ?

Thank you

Answer 1

You will get NaN values since your data join is not correct, you are trying to get values that are not currently present in your data. In order to get those values you would need to make a reference to data.years.

Here is my approach:

// Inheriting data from parent node and setting it up, 
// add year to each object so we can make use for our 
// mouse interactions.
year.selectAll('.gender-circles') 
  .data(function(data) {
    return data.years.map(function(d) {
      d.year = data.year;
      return d;
    })
  })
  .enter().append('circle')
  .attr("class", function(d) {
    return "gender-circles gender-circles-" + d.year;
  })
  .attr("r", 10)
  .attr('cx', function(d) {
    console.log(d)
    return x1(d.name) + 6.5;
  })
  .attr('cy', function(d) {
    return y(d.value) - 15;
  })
  .style('display', 'none'); // default display

// ....

// Using an invisible rect for mouseover interactions
year.selectAll('.gender-rect-interaction') 
  .data(function(d) { // Inheriting data from parent node and setting it up
    return [d];
  })
  .enter().append('rect')
  .attr("width", x0.rangeBand()) // full width of x0 rangeband
  .attr("x", function(d) { 
    return 0;
  })
  .attr("y", function(d) {
    return 0;
  })
  .attr("height", function(d) { // full height
    return height;
  })
  .style('opacity', 0) // invisible!
  .on('mousemove', function(d) { // show all our circles by class
    d3.selectAll('.gender-circles-' + d.year)
      .style('display', 'block');
  })
  .on('mouseout', function(d) { // hide all our circles by class
    d3.selectAll('.gender-circles-' + d.year)
      .style('display', 'none');
  });

Working plnkr: https://plnkr.co/edit/oH4KXdxdIW82nLGv46NI?p=preview