工具提示在javascript图表上是不可见的

时间:2013-07-22 12:42:07

标签: javascript d3.js tooltip

我有一个问题,我真的需要你的帮助。 我有一个实时图表,数据和时间是随机生成的,并且想要制作工具提示,以便在图表移动时显示路径上该点的时间和值。这就是我所拥有的,但工具提示没有显示在我的图表上! http://jsfiddle.net/QBDGB/59/这就是我在roder中添加到“path1”以显示工具提示的内容:

   //tooltip

 var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);

  var tooltip = d3.select("body").append("div")   
.attr("class", "tooltip")               
.style("opacity", 0);

  var blueCircles = svg.selectAll("path1")
    .data(data1s)
       .on("mouseover", function(d ,i) {
         tooltip.transition()
         .duration(650)
         .style("opacity", .9);
         tooltip.html(formatTime(new Date(d.time)) + "<br/>" + d.value)
         .style("left", (d3.event.pageX) + "px")
       .style("top", (d3.event.pageY - 28) + "px");
        })
       .on("mouseout", function(d ,i ) {
            div.transition()
                .duration(650)
                .style("opacity", 0);
        });

使用工具提示实时javascript图表工作的任何想法或类似示例?

谢谢,

1 个答案:

答案 0 :(得分:0)

我得到了工具提示。 http://jsfiddle.net/QBDGB/67/

这是我改变的原因和原因:

var blueCircles = svg.selectAll(".line1")
    //.data(data1s)

您正在传递“path1”作为选择器。 “path1”是变量的名称,而不是类的名称,您需要为类,ID或标记名称选择。不是变量名。没有前面字符的选择器正在选择标签名称(“a”,“body”,“head”等),而不是前面的“。”。为班级选择。这就是你想要做的事情。

我删除了“.data”调用,因为您已在此处包含数据:

var path1 = svg.append("g")
    .attr("clip-path", "url(#clip)")
    .append("path")
    .data([data1s])
    .attr("class", "line1"); 

有关更多https://github.com/mbostock/d3/wiki/Selections

的选择,请参阅d3 API