vertical bar showing values in javascript -
i have issue , need help. have realtime graph vertical bar moves cursor , want show value of graph (d.time , d.value) when cursor points to. http://jsfiddle.net/qbdgb/54/ have 2 series of data (data1s , data2s) generated randomly , put time in data generated in "time" variable can see:
now = new date(date.now() - duration); var data1 = initialise(); var data2 = initialise(); //make stacked data var data1s = data1; var data2s = []; for(var = 0; < data1s.length; i++){ data2s.push({ value: data1s[i].value + data2[i].value, time: data2[i].time } )}; function initialise() { var arr = []; (var = 0; < n; i++) { var obj = { time: date.now(), value: math.floor(math.random() * 100) }; arr.push(obj); } return arr;
}
when hover around graph want tooltip show time , value not recognize , show "undefined" since not know how pass datasets (data1s , data2s) "mouseover function can recognize data show! how tooltip functions made , call "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);
do have idea of do? think need add
svg.selectall("path1") .attr("opacity", 1) or svg.selectall("datas1") .attr("opacity", 1)
somewhere! not know how..
thank you,
update mouseover function as:
function mousemove(d) { div .text( d[0].time+ ", " + d[0].value) .style("left", (d3.event.pagex ) + "px") .style("top", (d3.event.pagey ) + "px"); }
include index object 'd'.
hope helps.
Comments
Post a Comment