javascript - D3tip 和堆积条形图

Question

我之前在 StackOverflow 的帮助下使用 d3 和 d3tip 制作了一个非常简洁的条形图(结果 here )。这次我尝试使用堆积条形图实现与 d3tip 类似的效果。我已经成功地使用网上找到的示例创建了堆叠条形图，但我无法让提示发挥作用(堆叠条形图片段 here )。

正如您在代码片段中看到的，我尝试使用以下代码来实现此目的:

    svg.selectAll(".g")
    .data(data)
    .enter().append("rect")
    .attr("class", "bar")
    .attr("x", function(d) {
        return x(d.Year);
    })
    .attr("width", x.rangeBand())
    .attr("y", function(d) {
        return y(d.N);
    })
    .attr("height", function(d) {
        return height - y(d.N);
    })
    .on('mouseover', tip.show)
    .on('mouseout', tip.hide);

以前工作得很好。然而由于某种原因，当我将鼠标悬停在栏上时，没有显示任何内容。我预计堆叠部分会遇到一些问题，但我不明白为什么根本没有显示提示。

提示的内容仍有待开发(我仍在争论我到底想显示什么)，但我相信它至少应该显示一个提示。我在这里缺少什么？

Answer 1

您的鼠标悬停位置错误。之前你有一个条形图，现在你有一个堆积条形图(显然)，但带回的数据会有所不同。

例如，您的鼠标悬停不会执行任何操作，因为调用它的地方不会执行任何操作。

所以我将鼠标移至您需要的位置，记录的数据如下:

Object {name: "Trek", y0: 43, y1: 86}

因此，您可以带回的唯一数据是d.name，而不是d.Year 和d.N。这是由于通过创建堆栈带来的数据:

  data.forEach(function(d) {
    var y0 = 0;
    d.ages = color.domain().map(function(name) { return {name: name, y0: y0, y1: y0 += +d[name]}; });
    d.total = d.ages[d.ages.length - 1].y1;
  });

所以我已经更新了您的提示:

return "<strong>Name:</strong> <span style='color: #DA6A26'>" + d.name + "</span>" 

并将鼠标悬停至第 100 行:

.on('mouseover', function(d){
          console.log('mouseover');
          console.log(d)
         tip.show(d);
        } )
        .on('mouseout', tip.hide);

我已将日志留在那里，以便您可以看到输出了哪些数据。

更新了plnkr:http://plnkr.co/edit/nrslJjlM37Hu5DR2ZBXw?p=preview

顺便说一句，您到 css 文件的链接是错误的。因此，它应该是 style.css

，而不是 css/style.css

现在，将鼠标悬停在上面，您就会得到名字。如果您不希望这样做，那么您需要在创建堆栈时引入正确的数据。即在这一行:

 d.ages = color.domain().map(function(name) { return {name: name, y0: y0, y1: y0 += +d[name]}; });