D3tip和堆积条形图

我以前用StackOverflow（结果here）做了一个使用d3和d3tip的非常整洁的条形图。这次我试图用d3tip实现类似的东西，同时使用堆叠条形图。我已经设法使用网络上的示例创建堆叠条形图，但是我无法设法得到提示（堆积条形图here的片段）。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);

而此前的工作完全正常。然而由于某种原因，当我将鼠标悬停在酒吧上时，没有任何显示。我预计会遇到堆叠部分的一些问题，但我不明白为什么没有显示任何提示。

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

来源

2016-04-25 Yoeri

您的鼠标悬停在错误的地方。以前它是在实际的酒吧。现在不是。如果删除整个最后一个函数，即svg.selectAll（'。g'），则通知没有任何反应。它实际上并没有做任何事 – thatOneGuy

@thisOneGuy我看到它没有做任何事情，如果我删除代码的这一部分（如果它？），代码不应该中断。我觉得错误在选择器（“.g”）中，但我不确定要选择什么。 – Yoeri

我已经添加了答案解释，让我知道如果你不明白 – thatOneGuy

你的鼠标悬停在错误的地方。在你有条形图之前，你现在有一个堆积的条形图（很明显），但回来的数据会有所不同。

例如，你的mouseover不做任何事情，因为它被调用的地方什么都不做。

所以我已经改变了鼠标悬停到你需要它，并记录的数据如下：

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

来源

2016-04-25 12:07:11 thatOneGuy

这确实做到了这一点，谢谢指引我朝着正确的方向！ – Yoeri

D3tip和堆积条形图

回答

相关问题