D3tip 和堆叠条形图

Question

我之前在 Whosebug 的帮助下使用 d3 和 d3tip 制作了一个非常简洁的条形图（结果 here). This time I'm trying to achieve something similar with d3tip whilst using a stacked bar chart. I've managed to create the stacked bar chart using examples found on the web, but I can't manage to get the tip to work (snippet of stacked bar chart 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.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 文件的 link 是错误的。所以而不是 css/style.css 它应该只是 style.css

现在鼠标悬停时，您会得到名称。如果您不想要这个，那么您需要在创建堆栈时提供正确的数据。即在这一行：

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

D3tip 和堆叠条形图

D3tip and stacked bar charts

javascript

charts

tooltip

d3.js