D3工具提示无法呈现正确的数据值

Question

我正在使用d3-tip.js在每个堆栈的堆叠字符中添加工具提示，这将显示每个条形码中每种性别的人口。但是，提示未正确显示数据。下面是我为工具提示实现的代码

var tip = d3.tip()
           .attr('class', "d3-tip")
           .style("color", "white")
           .style("background-color", "black")
           .style("padding", "6px")
           .style("border-radius", "4px")
           .style("font-size", "12px")
           .offset([-10, 0])
           .html(function(d) { return `<strong>${d3.format(',')(keys, k => +d[k])}</strong> keys`; });

       svg.call(tip);

       svg
         .selectAll('g.layer')
         .on('mouseover', function(d) {
         // show the tooltip on mouse over
         tip.show(d, this);
         // when the bar is mouse-overed, we slightly decrease opacity of the bar.
         d3.select(this).style('opacity', 0.7);
         }) 
         .on('mouseout', function(d) { 
         // hide the tooltip on mouse out
         tip.hide();
         d3.select(this).style('opacity', 1)
       });

下面是我现在得到的，似乎数据没有正确返回。我希望提示返回每种关系的每种性别的人口。

这是我的图表http://plnkr.co/edit/6xB2Kzi46hWL37UjlgTs?p=preview的有效完整代码的Plunker链接

已更新：

现在，我解决了共享工具提示和奇怪的工具提示位置问题，但是，数据仍然无法正确呈现。 以下是工具提示的更新代码：

var tip = d3.select(".d3-tooltip")
                  .style("visibility", "hidden");

               svg.selectAll(".x-axis").transition().duration(speed)
                  .call(d3.axisBottom(xScale).tickSizeOuter(0))

               var group = svg.selectAll("g.layer")
                   .data(d3.stack().keys(keys)(data), d => d.key)

               group.exit().remove()

               group.enter().append("g")
                 .classed("layer", true)
                 .attr("fill", d => z(d.key))
                 .on("mouseover", function(d) {
                  tip.html("<p>" + d.key + "</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")
                 });

在代码tip.html("<p>" + d.key + "</p>"),中，它仅在关键图中返回男性或女性，但是，我想返回总体/值。下面是我现在拥有的图形：

如何在此堆积的条形图上返回与每种关系相对应的每种性别的人口/价值？