I combined two simple examples from the react-select site (5.6.0) and the d3 site (7.6.1) in this codesandbox:

https://codesandbox.io/s/xenodochial-mccarthy-sjqv8w?file=/src/App.js

If you comment out Select on line 61, d3-zoom's behavior works as expected. If you uncomment it, the zoom behavior no longer works.

Anything I can do to make both work? If not, any sense on who I should file the bug with? (The example is adapted from a larger project of my own, where the select will affect the graph.)

CodePudding user response：

Turns out the explanation is that most sample code for d3 just refers to a generic .select('svg'). And react-select has svg in its default dropdown.

Adding a unique identifier to the <svg /> element or a parent element resolves the issue.