javascript - 向流图添加更新工具提示

标签 javascript d3.js tooltip stream-graph

我有一个流图,我想添加当鼠标悬停在每个流上时出现的工具提示,就像这个例子:

http://archive.stamen.com/mtvmovies-streamgraph/index.html

enter image description here

我现在有一些工具提示可以做类似的事情,但它们只显示每个流中的第一个值,所以无论我将光标悬停在流中的哪个位置,我都只会收到起始值。此外,工具提示不是连续的,所以当我移动光标时,工具提示消失了

这是我现在使用的代码。

   var toolTip = vis.selectAll("path")
       .data(data)
       .append("svg:title")
       .text(function(d) {
           return ('Date: ') + formatTime(d.d_date) +
                  (' Money: ') + (d.money) +
                  (' Movie: ') + (d.name)
       });

有没有人有什么建议或意见??

最佳答案

我认为您只是错过了对 enter().append() 的调用。除非另有说明,否则元素共享其父元素的数据。

/* Join */
var stream = viz.selectAll("path").data(data);

/* Enter */
stream.enter().append("path").append("title");

/* Exit */
stream.exit().remove();

/* Update */
stream
  .attr("d", function(d) { return d.path; })
.select("title")
  .text(function(d) { 
      return ('Date: ') + formatTime(d.d_date) 
        + (' Money: ') + (d.money) 
        + (' Movie: ') + (d.name);
  });

关于javascript - 向流图添加更新工具提示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14814913/

相关文章:

javascript - JQuery Click 事件只工作一次

css hover 和 immidiatily 先例不起作用

javascript - CasperJS - 在网站上注册并验证 Gmail 上发送的邮件 - 对于 slimer 和 phantom -

javascript - 在 http.get 完成之前返回的 Angular JS 函数

Javascript 安全问题/使用 eval()

javascript - d3 csv 数据加载

javascript - 带有颜色阶梯的仪表图

javascript - Nvd3 : How prevent to display chart between -1 and 1 if have all y values 0?

java - 如何在java中查找<Strong><br>标签的工具提示文本消息

javascript - 总是显示 jQuery Tipsy?