d3.mouse always returns [NaN, NaN]

[sungwoncho]

Version: latest react-faux-dom (2.7.1) and React 15.1.0.

When I do:

    const node = ReactFauxDOM.createElement('svg');

    const svg = d3.select(node)
        .attr('width', width + margin.left + margin.right)
        .attr('height', h + margin.top + margin.bottom)
      .append('g')
        .attr('transform', `translate(${margin.left}, ${margin.top})`);
    ...

    svg.append('rect')
      .attr('width', width)
      .attr('height', h)
      .style('fill', 'none')
      .style('pointer-events', 'all')
      .on('mousemove', function() {
        const pos = d3.mouse(this);
        console.log(pos);
      });

pos is always [NaN, NaN].

I can confirm that this inside the mousemove callback is a DOM element (e.g. Element {nodeName: "rect", parentNode: Element, childNodes: Array[0], eventListeners: Object, text: ""…}).

Any ideas why?

[Olical]

Are you sure your width and height are correct? width + margin.left + margin.right evaluates to a number and not NaN?

[Olical]

Also, I'd try setting a breakpoint, maybe around here, and looking for anything suspicious. d3.mouse uses a function called point which accesses getBoundingClientRect, something that was added pretty recently.

[BeshoyLouka]

@sungwoncho I am using the d3 event for now:

...
      .on('mousemove', function() {
        console.log(d3.event.layerX, d3.event.layerY;);
      });
...

[sungwoncho]

I will try again soon and close if not a bug.

[Olical]

Any thoughts on this? Reproducible as a test?

[sungwoncho]

@Olical I am currently not working on a feature involving this bug and have some other priorities. But I will get back to this one.

[Olical]

Since it doesn't seem to be a widespread issue (maybe a rare edge case?) I'll close this for now. Feel free to open it again if you hit it. A test that reproduces it would be brilliant, but no pressure.

Thanks for the initial report anyway! I'll keep this in mind.

[Xalio08]

I have a similar problem. It might be related to the fact that this is not a real d3 node. d3.mouse(this) returns [NaN,NaN], whereas d3.mouse(d3.select('svg').select('g').node()) returns the correct value. @BeshoyLouka workaround is good though.

[P1zz4br0etch3n]

This also breaks zoom support because x and y in the transform object in d3 zoom event are also NaN.