D3.event.pagex & D3.mouse(this)[0]

I tried to figure out the difference between 'd3.event.pageX' & 'd3.mouse(this)[0]'. I guessed both are same but, when I console.log both, the value was different by '8' in m

Solution 1:

In documentation is written:

While you can use the native event.pageX and event.pageY, it is often more convenient to transform the event position to the local coordinate system of the container that received the event using d3.mouse, d3.touch or d3.touches.

d3.event

d3.mouse - uses local coordinate (without margin (60px))

d3.event.pageX - uses global coordinate (with margin (60px))

But local cordinate start on 68px. I guess 8 pixels is used to describe the y-axis.