D3 Dragging + Zooming in ReactJS

Question

Is it possible to translate the following D3 snippet into "pure" ReactJS to avoid any interaction with the DOM from D3 (to let React handle it instead)?

// Dragging an SVG `g` element
d3Select(this.g)
  .call(
    d3Drag()
      .on('start', this.handleDragStarted)
      .on('drag', this.handleDragged)
      .on('end', this.handleDragEnded)
  );

// Zooming
d3Zoom()
  .on('start', this.handleZoomStart)
  .on('zoom', this.handleZoom)
  .on('end', this.handleZoom);

Wira

I've been looking into this for a while now too. The only thing I could find about this is this three year old blog post: browniefed.com/blog/react-art-zooming-and-dragging. It might hold some promising clues though. I've got a d3 force layout in react which is draggable after render, but stops being draggable after a few seconds. Would you mind having a look at it? I wonder if it might be related to the fact that d3 handles the dragging and not React: #48941913 – Selfjustifying

Interesting article, thanks for sharing! – Wira