Failed to execute 'querySelector' on 'Document': '[object Object]' is not a valid selector.

[AlyShmahell]

Hello,

I've been trying to build an interactive canvas with d3 + react-faux-dom.

I've followed the instructions on the documentation, this is my MWE:

const semCanvas = this.props.connectFauxDOM('canvas', 'semCanvas');

var canvas = document.querySelector(semCanvas),
                    context = canvas.getContext("2d");

d3.select(canvas)
            .call(d3.drag()
               ....
              );

the error in question happens at: context = canvas.getContext("2d");

Noting that I've used something similar in my working vanilla implememntation (without react-faux-dom):

var canvas = document.querySelector("canvas"),
                    context = canvas.getContext("2d");

So I assume there is a different way to handle context in react-faux-dom, but I'm unsure where to look for answers other than here.

[Olical]

You've already got the element in semCanvas, I don't think you need to run document.querySelector on it, it's not a string.

[AlyShmahell]

Oh, yeah that makes sense, I just assumed I had to query, since in the documentation - for animation - you gave an example that goes like the following:

const faux = this.props.connectFauxDOM('div', 'chart')
d3.select(faux)

I now realize that a document query is indeed on a string while a D3 select is on a faux D3 element.

In any case, I would test this on a fresh implementation of something new, this way I can start from scratch and do it properly, right now I solved the problem by loading the pure D3 implementation inside the react DOM, so far it did not crash the DOM since only D3 affects changes.

Thanks for the help Oliver, I'm gonna close this issue for now, and if the need arises I will reopen it.

Cheers!