D3.js Can'；t将标题添加到D3上的堆叠条形图

我正在使用此工具创建堆叠条形图。图表可以工作并呈现，但我无法添加鼠标悬停标签

我试过这个

  DATE.selectAll("rect")
  .data(function(d) { return d.ages; })
  .enter().append("rect")
  .attr("width", x.rangeBand())
  .attr("y", function(d) { return y(d.y1); })
  .attr("height", function(d) { return y(d.y0) - y(d.y1); })
  .style("fill", function(d) { return color(d.name); });
  .append("svg:title")
  .text(functino(d){return "foo"});

但是在添加

.append（“svg:title…

后，图形将停止渲染。如果我删除

.style（“fill…

行”），图形将渲染，但是它没有堆叠，也没有鼠标悬停功能

我也尝试过使用工具提示路线。（）

---

但还是不走运。我需要加载一个库吗？不确定发生了什么。

当您尝试附加

标题时，图形停止渲染，因为您有一个输入错误：它是
函数
，而不是
函数

除此之外，您还需要获得每个堆叠条的值：

.append("title")
.text(function(d){
    return d[1]-d[0]
});

以下是演示：

但是我不喜欢
s。它们不是很通用。因此，我宁愿创建一个div，而不是像您链接的第二个代码那样创建另一个

var tooltip = d3.select("body").append("div")
    .attr("class", "tooltip")
    .style("opacity", 0);

我们通过以下方式定位和设置HTML文本：

.on("mousemove", function(d) {
    tooltip.html("Value: " + (d[1] - d[0]))
        .style('top', d3.event.pageY - 10 + 'px')
        .style('left', d3.event.pageX + 10 + 'px')
        .style("opacity", 0.9);
}).on("mouseout", function() {
    tooltip.style("opacity", 0)
});

下面是演示：
哇！两种方法都有效，但我同意你的看法。潜水路线要好得多。谢谢杰拉尔多！
.on("mousemove", function(d) {
    tooltip.html("Value: " + (d[1] - d[0]))
        .style('top', d3.event.pageY - 10 + 'px')
        .style('left', d3.event.pageX + 10 + 'px')
        .style("opacity", 0.9);
}).on("mouseout", function() {
    tooltip.style("opacity", 0)
});