我有一个问题,我真的需要你的帮助。 我有一个实时图表,数据和时间是随机生成的,并且想要制作工具提示,以便在图表移动时显示路径上该点的时间和值。这就是我所拥有的,但工具提示没有显示在我的图表上! 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图表工作的任何想法或类似示例?
谢谢,
答案 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");
的选择,请参阅d3 API