Unable to create two instances of react-digraph correctly

[javidhsueh]

Describe the bug
I'd like to show two react-digraph instances on the page, so users can see two graph side-by-side. However, only the first graph shows the graph while the second instance displays empty canvas.

To Reproduce
Steps to reproduce the behavior:

1. Create two instances of react-digraph and pass the same graph to both of them.
2. You will see only the first instance displays the graph correctly, the second one is empty.

Expected behavior
See both graphs on the same page.

Screenshots

https://codesandbox.io/s/react-digraph-di2dv?file=/src/index.js

Desktop (please complete the following information):

• OS: Mac v10.15.3
• Browser Chrome
• Version v81.0.4044.138

[wthoutanymmries]

I've encountered the same problem. Do you have a solution?

[ajbogh]

An update on this issue. I've started to create a fix for it and will include an update to the examples. I am currently running into a situation where rendering using a Transformer isn't working correctly, so that will delay the update. The fix will also solve another rendering bug with the Transformer option.

[ajbogh]

Another update on this, I've gotten the Transformer example to render by using a more inclusive ID querySelector that allows IDs with anything but the single-quote symbol. It now works with the IDs in the example that have spaces, and will also work with various special characters. The single quote character is the ID string delimiter.

If these changes cause regressions for anyone due to apostrophes in the node IDs, then the answer on how to escape the single-quotes in the IDs can be found here (replace the double-quote with single quote in the regex): https://stackoverflow.com/questions/22830519/what-chars-needs-escaping-in-queryselector

[ajbogh]

See #234 for the fix.