D3tip 和堆积条形图

D3tip and stacked bar charts

本文关键字：条形图 D3tip      更新时间：2023-09-26

我之前在StackOverflow的帮助下使用d3和d3tip制作了一个非常整洁的条形图（结果在这里）。这次我尝试在使用堆叠条形图的同时使用 d3tip 实现类似的东西。我已经设法使用网络上找到的示例创建了堆叠条形图，但我无法设法让提示起作用（此处为堆叠条形图片段）。

正如您在代码片段中看到的那样，我尝试使用以下代码来实现这一点：

    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);

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

提示

的内容仍有待开发（我仍在争论我到底想显示什么），但我相信它至少应该显示提示。我在这里错过了什么？

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

例如，鼠标悬停不执行任何操作

，因为调用它的位置不执行任何操作。

所以我已将鼠标更改为您需要的位置，记录的数据如下： 

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

因此，除了d.Year&d.N，您唯一可以带回的数据是d.name。这是由于通过堆栈带来的数据： 

  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文件的链接是错误的。因此，与其css/style.css不如style.css

现在鼠标悬停时，你会得到名字。如果您不希望这样做，则需要在创建堆栈时提供正确的数据。即在这一行： 

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