Javascript D3v4堆叠条形图工具提示

我正在使用

d3.stack（）
但是我很难访问鼠标悬停工具提示的初始数据集的相关值

serie.selectAll("rect")
    .data(function(d) { return d; })
    .enter().append("rect")
      ...
      .on("mousemove", function(d){
          let coords = d3.mouse(svg.node());
          tooltip.style("left", coords[0] + "px");
          tooltip.style("top", coords[1] - 70 + "px");
          tooltip.style("display", "inline-block");
          tooltip.html("HOW TO ACCESS DATA HERE?");
        });

d
是
数组[2]
此时的值定义基线/顶线，
d.data
是完整的原始数据对象，但缺少我当前悬停在序列堆栈上的信息。

理想情况下，我希望工具提示能够显示像
{name:“item1”，foo:10，bar:20}

value: 10
percentage: 33%

当鼠标悬停在
foo
rect.

我找到的所有示例都是针对D3v3的，在D3v3中，您可以简单地使用
d.y
来访问相关值，但这似乎不再适用于D3v4。
您可以获取访问父级数据的元素的名称，并使用该名称来获取值：

.on('mouseover', function(d, i) {
    var thisName = d3.select(this.parentNode).datum().key;
    var thisValue = d.data[thisName];
    var total = d.data.foo + d.data.bar;
    tooltip.html("Name: " + thisName + "<br>Value: " + thisValue + "<br>Percentage: " + thisValue / total + "%");
});

.on（'mouseover'，函数（d，i）{
var thisName=d3.select（this.parentNode）.datum（）.key；
var thisValue=d.data[thisName]；
var total=d.data.foo+d.data.bar；
html（“名称：“+thisName+”
值：“+thisValue+”
百分比：“+thisValue/total+”%”）；
});

以下是经过修改的代码：


var svg=d3.选择（“svg”），
保证金={
前20名，
右：60，
底数：30，
左：40
},
宽度=+svg.attr（“宽度”）-margin.left-margin.right，
高度=+svg.attr（“高度”）-margin.top-margin.bottom，
g=svg.append（“g”）.attr（“transform”、“translate”（+margin.left+）、“+margin.top+”）；
var x=d3.scaleBand（）
.rangeRound（[0，宽度]）
.填充（0.1）
.对齐（0.1）；
变量y=d3.scaleLinear（）
.rangeRound（[高度，0]）；
var stack=d3.stack（）
.偏移量（d3.stackOffsetExpand）；
变量颜色=[“FF0000”、“00FF00”、“0000FF”]；
风险值数据=[{
名称：“项目1”，
傅:10,，
酒吧：20
}, {
名称：“项目2”，
傅：50，
酒吧：50
}];
x、 域（data.map）（函数（d）{
返回d.name；
}));
变量系列=g.selectAll（“.serie”）
.data（stack.key（[“foo”，“bar]”）（数据））
.enter（）.append（“g”）
.attr（“类别”、“系列”）
.attr（“填充”，函数（d，i）{
返回颜色[i]；
});
var tooltip=d3。选择（“#tooltip”）；
var rects=serie.selectAll（“rect”）
.数据（功能（d）{
返回d；
})
.enter（）.append（“rect”）
矩形属性（“x”，函数（d）{
返回x（d.data.name）；
})
.attr（“y”，函数（d）{
返回y（d[1]）；
})
.attr（“高度”，功能（d）{
返回y（d[0]）-y（d[1]）；
})
.attr（“宽度”，x.带宽（））
.on（'mouseover'，函数（d，i）{
var thisName=d3.select（this.parentNode）.datum（）.key；
var thisValue=d.data[thisName]；
var total=d.data.foo+d.data.bar；
html（“名称：“+thisName+”
值：“+thisValue+”
百分比：“+thisValue/total+”%”）；
});
g、 附加（“g”）
.attr（“类”、“轴--x”）
.attr（“变换”、“平移（0）”、“高度+”）
.call（d3.axisBottom（x））；
g、 附加（“g”）
.attr（“类”、“轴--y”）
.call（d3.Axisleet（y）.ticks（10，“%”）

工具提示
v4中的第一个参数（
d
）与v3完全相同。我建议你发一篇文章。然后我的假设是与版本相关的是错误的，尽管如此问题仍然存在：我如何知道我在这个系列的哪个矩形上徘徊？根据这个例子（），它应该是
d.y
，但这里的小提琴不起作用，因为
d
是堆栈数组：非常感谢，
d3.select（this.parentNode）.datum（）.key
是我无法理解的部分@Gerardo Furtado如何在悬停时将工具提示移动到栏上方？对于像你这样有知识的人来说，这可能是一个快速解决方案。谢谢