Javascript 如何知道D3堆叠条的鼠标位于哪个条中？

我在d3中得到了堆叠条，需要添加工具提示。我很难弄清楚鼠标在哪个栏中，你知道我怎样才能确定鼠标在哪个栏中吗

group.enter().append("g")
         .classed("layer", true)
         .attr("fill", d => z(d.key))
         .on("mouseover", function(d) {
          var num = d.key == "xkey" ? d[4][1] : d[4][1] - d[4][0]
          tip.html("<p>" + d.key + " " + num + "</p>")
            .style("left", (d3.event.pageX) + "px")
            .style("top", (d3.event.pageY - 28) + "px")
            .style("visibility", "visible")
         })
         .on("mouseout", function(d) {
          tip.style("visibility", "hidden")
         });

group.enter（）.append（“g”）
.classed（“层”，真）
.attr（“填充”，d=>z（d键））
.on（“鼠标悬停”，功能（d）{
var num=d.key==“xkey”？d[4][1]：d[4][1]-d[4][0]
html（“”+d.key+“+num+”
”）
.style（“左”，“d3.event.pageX）+“px”）
.style（“顶部”（d3.event.pageY-28）+“px”）
.style（“可见性”、“可见”）
})
.开启（“鼠标出”，功能（d）{
提示：样式（“可见性”、“隐藏”）
});

现在我只是硬编码来显示最后一条数据。也许我可以玩xScale和事件的x位置？或者这不是D3的方法

---

下面是提示：

我建议您触发

栏上的事件，而不是触发组上的鼠标悬停事件。原因是组上的
数据
绑定是为男性和女性堆叠的，因此无法提供条形图类型，即
关系
。但是，在
栏中
如果在鼠标悬停功能中使用
console.log（d）
，则可以清楚地看到相应的
d.data.Relations

但是，现在代替单个数字，您将获得一个数组，例如，当您将鼠标移到女性上时，
[0,70]
，当您将鼠标移到男性上时，
[60130]
用于2002年的数据和“其他”
关系。这个数组的工作方式是第一个值是当前值，而第二个值是总值。我们可以将该值与
d.data
中的值进行比较，以评估该值是否适用于男性或女性。因此，如果
d[1]
等于
numF
，即
+d.data.Female
的值，那么它是女性，但如果
d[1]
等于
numF+numM
，即
（+d.data.Male）+（+d.data.Male）
的值之和，那么它是男性，在这种情况下，由于
键的顺序为
[“内”、“外”]
，因此外螺纹堆叠在内螺纹顶部

   bars.enter().append("rect")
       .attr("width", xScale.bandwidth())
       .merge(bars)
        .on("mouseover", function(d) {
         console.log(d);
         // get number of females
         let numF = +d.data.Female;
         // get number of males
         let numM = +d.data.Male;
         // get the Relations
         let Relations = d.data.Relations;

         // Evaluate the gender by comparing the mouseover data value for d[1] to the numF for 'Female'
         // or 
         // numF+numM
         let gender,value;
         if (d[1] === numF){
           gender = 'Female';
           value = numF;
         }else if (d[1] === numF+numM) {
           gender = 'Male';
           value = numM;
         }

        //produce the tooltip
        tip.html("<p>" +Relations + "<br>" + gender + ": " + value + "</p>")
        .style("left", (d3.event.pageX) + "px")
        .style("top", (d3.event.pageY - 28) + "px")
        .style("visibility", "visible");
        })
        .on("mouseout", function(d) {
          tip.style("visibility", "hidden");
        })
   .transition().duration(speed)
       .attr("x", d => xScale(d.data.Relations))
       .attr("y", d => yScale(d[1]))
       .attr("height", d => yScale(d[0]) - yScale(d[1]));

bar.enter（）.append（“rect”）
.attr（“宽度”，xScale.bandwidth（））
.合并（条）
.on（“鼠标悬停”，功能（d）{
控制台日志（d）；
//获得女性数量
设numF=+d.data.femal；
//得到雄性的数量
设numM=+d.data.Male；
//得到关系
let Relations=d.data.Relations；
//通过比较d[1]的鼠标悬停数据值和“女性”的numF来评估性别
//或
//numF+numM
让性别、价值；
if（d[1]==numF）{
性别=‘女性’；
数值=numF；
}else如果（d[1]==numF+numM）{
性别=‘男性’；
数值=毫米；
}
//生成工具提示
html（“”+Relations+”
“+gender+”：“+value+”
”）
.style（“左”，“d3.event.pageX）+“px”）
.style（“顶部”（d3.event.pageY-28）+“px”）
.风格（“可见性”、“可见”）；
})
.开启（“鼠标出”，功能（d）{
提示：风格（“可见性”、“隐藏”）；
})
.transition（）.持续时间（速度）
.attr（“x”，d=>xScale（d.data.Relations））
.attr（“y”，d=>yScale（d[1]））
.attr（“高度”，d=>yScale（d[0]）-yScale（d[1]）；

注意：我必须更改工具提示的css，使其略高一些，因为我在
关系
和
性别：数字
之间添加了一个


另外，为了清晰起见，我还对代码进行了一些清理，例如分号，并将
和工具提示
放在
中，而不是放在
之外。
您能否使用一些示例数据创建一个JSFIDLE/codepen/块，以查看其结构。您应该能够使用
d
来完成此操作，该函数在
mouseover
函数中传递。@Coola我实际上是console.log d，它是一个数据数组，问题是我不知道需要选择哪个索引的值。@Coola用包含数据的整个项目的链接更新了问题。