0

我有一个问题，我真的需要你的帮助。我有一个实时图表，数据和时间是在其上随机生成的，并且想要制作一个工具提示来显示图表移动时路径上该点的时间和值。这就是我所拥有的，但工具提示未显示在我的图表上！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 图表的任何想法或类似工作示例？

谢谢，

4

1 回答 1

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

有关更多选择，请参阅 d3 API https://github.com/mbostock/d3/wiki/Selections

于 2013-07-22T13:51:27.317 回答