Javascript 条形图d3.js顶部的圆圈

我正在根据迈克·博斯托克的教程制作分组条形图

我不知道如何将圆圈放在我的条上，以便在悬停时充当工具提示，就像在中一样，只是它在条上而不是线上

我试着像这样附加圆圈：

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); })         
    });

但我得到的是价值观。我很困惑应该使用哪个变量来获得正确的cx和cy

这是我的名片

有什么想法吗

---

谢谢

您将获得NaN值，因为您的数据联接不正确，您正在尝试获取数据中当前不存在的值。为了获得这些值，您需要引用data.years

我的做法如下：

// 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');
  });

---

工作plnkr:

这太完美了！我定制了一点来满足我的需要，但是你帮了我很大的忙，谢谢！