无法将标题添加到 D3 上的堆积条形图

Question

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

我试过了...

  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... 行，图形会呈现，但它不会堆叠并且没有鼠标悬停功能。

我也试过使用工具提示路线。 (Source)

  .on("mouseover", function() { tooltip.style("display", null); })
  .on("mouseout", function() { tooltip.style("display", "none"); })
  .on("mousemove", function(d) {
    var xPosition = d3.mouse(this)[0] - 15;
  var yPosition = d3.mouse(this)[1] - 25;
  tooltip.attr("transform", "translate(" + xPosition + "," + yPosition + ")");
tooltip.select("text").text(d.y);
});


// Prep the tooltip bits, initial display is hidden
var tooltip = svg.append("g")
.attr("class", "tooltip")
.style("display", "none");

tooltip.append("rect")
.attr("width", 30)
.attr("height", 20)
.attr("fill", "white")
.style("opacity", 0.5);

tooltip.append("text")
.attr("x", 15)
.attr("dy", "1.2em")
.style("text-anchor", "middle")
.attr("font-size", "12px")
.attr("font-weight", "bold");

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

Answer 1

当您尝试附加 title 时图表停止呈现，因为您有错字：它是 function，而不是 functino。

除此之外，这是获取每个堆积条的值所需要的：

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

这是演示：https://bl.ocks.org/anonymous/raw/886d1749c4e01e191b94df23d97dcaf7/

但我不喜欢 <title>s。它们不是很通用。因此，不像您链接的第二个代码那样创建另一个 <text>，我更喜欢创建一个 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)
});

这是演示：https://bl.ocks.org/anonymous/raw/f6294c4d8513dbbd8152770e0750efd9/

无法将标题添加到 D3 上的堆积条形图

Can't add title to stacked bar graph on D3

d3.js

tooltip

bar-chart

stacked-chart