vertical bar showing values in javascript

Question

I have an issue and I really need your help. I have a realtime graph with a vertical bar that moves with cursor and i want it to show the value of the graph (d.time and d.value) when the cursor points to. http://jsfiddle.net/QBDGB/54/ i have two series of data (data1s and data2s) that is generated randomly and I put the time in which the data is generated in "time" variable as you can see:

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;

}

When I hover around the graph I want the tooltip show the time and value but it does not recognize it and show "undefined" since I do not know how to pass my datasets (data1s and data2s) so "mouseover function can recognize which data to show! This is how the tooltip functions are made and call from "path1" and "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 you have any idea of what to do? i think i need to add

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

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

Somewhere! but i do not know how..

Thank you,

Answer 1

Update your 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 the index to the object 'd'.

Hope that helps.