垂直条在javascript中显示值

我有一个问题，我真的需要你的帮助。我有一个实时图形，它带有一个随光标移动的垂直条，我希望它在光标指向时显示图形的值（d.time和d.value）。 http://jsfiddle.net/QBDGB/54/我有两个系列，其随机产生的数据（data1s和data2s）的我把其中在“时间”被生成的数据的时间变量，你可以看到：垂直条在javascript中显示值

now = new Date(Date.now() - duration); 

var data1 = initialise(); 
var data2 = initialise(); 


//Make stacked data 

var data1s = data1; 
var data2s = []; 
for(var i = 0; i < data1s.length; i++){ 
data2s.push({ 
value: data1s[i].value + data2[i].value, 
time: data2[i].time 
} 
)}; 

function initialise() { 

var arr = []; 
for (var i = 0; i < n; i++) { 
    var obj = { 
time: Date.now(), 
value: Math.floor(Math.random() * 100) 
}; 
    arr.push(obj); 
} 

return arr;

}

当我悬停在图表上我希望工具提示显示时间和价值，但它不能识别它并显示“未定义”，因为我不知道如何传递我的数据集（data1s和data2s），所以“mouseover函数可以识别显示哪些数据！这是工具提示功能的制作方法，以及从“path1”和“path2”的调用。

function mouseover() { 
    div.transition() 
    .duration(500) 
    .style("opacity", 1); 
} 

function mousemove(d) { 



div 
    .text(d.time+ ", " + d.value) 
    .style("left", (d3.event.pageX) + "px") 
    .style("top", (d3.event.pageY) + "px"); 
} 

    function mouseout() { 
    div.transition() 
    .duration(500) 
    .style("opacity", 1e-6); 
} 

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


    var path2 =svg.append("g") 
    .attr("clip-path", "url(#clip)") 
    .append("path") 
    .data([data2s]) 
    .attr("class", "line2") 
    .on("mouseover", mouseover) 
    .on("mousemove", mousemove) 
    .on("mouseout", mouseout);

你有什么想法做什么？我想我需要添加

svg.selectAll("path1") 
.attr("opacity", 1) 

or svg.selectAll("datas1") 
.attr("opacity", 1)

某处！但我不知道

如何..谢谢你，

来源

2013-07-22 sasha

哇！好的应用程序你还可以修复你的代码缩进来反映它的迷人吗？ – jsalonen

你是否在取笑我;）工具提示无法正常工作。所以我们不能称它为好的应用程序！：P你有任何想法或类似的例子向我介绍。我真的阻止了它:( – sasha

你检查了这一个：http://jsfiddle.net/albanlopez/D4MRP/8/（它获得时间和价值） – acudars

更新您的鼠标悬停功能：

function mousemove(d) { 

div 
.text(d[0].time+ ", " + d[0].value) 
.style("left", (d3.event.pageX) + "px") 
.style("top", (d3.event.pageY) + "px"); 
}

包括索引对象 'd'。

希望有所帮助。

来源

2013-07-22 09:14:24 SHANK

非常感谢你的帮助，它显示了一些值，但它仍然无法识别正确的值，我更新了你在这里推荐的内容：http://jsfiddle.net/ QBDGB/54 /和我做了另一个图表，显示了正确的值，但我不知道如何摆脱圈子！http://jsfiddle.net/QBDGB/52/ – sasha

代码有一些变化，一些blueCircle功能是在代码中有导致蓝点，请检查这一点 – SHANK

谢谢你的时间，但我不知道你的意思，你能解释我更多？如果我可以删除蓝色的圆圈，我可以达到到正确的工具提示，我不喜欢他们上下跳动的方式但至少他们可以识别正确的值，因为这个“部分：svg.selectAll（”dot“） .data（data1s）”但我怎么能在我以前的版本中有这部分？ :(我真的被阻止在这.. – sasha

垂直条在javascript中显示值

回答

相关问题