I had a problem that might have been similar to yours, I needed to select a time based on the mouse position, this is what I did (might give you some ideas):

var timeScale = d3.scale.linear()
    .domain([startTime.getTime(), endTime.getTime()])
    .range([30, r + 10])

axisOverlay.on("mousemove", mousemove)
    .on("touchmove", mousemove);

function mousemove() {
    selectedTime = new Date(timeScale.invert(d3.mouse(this)[1]));


I used d3.event.pageY to map mouse coordinates using scale:

var toolTipScale = d3.scale.linear().domain([h + 80, 80]).range([0, max_value]);

and then you use:

div.html("n = " + Math.ceil(toolTipScale( d3.event.pageY)) )

To map mouse position correctly it is necessary to add css

body { margin: 0; padding: 0; }

Here is jsfiddle of this -

To access elements from second array you can use d3.event.pageX:

var iScale = d3.scale.linear().domain([w + 80, 80]).range([data[0].length, 0]);

and then:

div.html("n = " + data[1][Math.floor(iScale( d3.event.pageX))] )


Related Query