reactjs - React-hooks 和 d3.forceSimulation

Question

我在 React 中的 forceSimulation(使用 Hooks)遇到了一些问题。问题在于，每当数据发生变化时，每个气泡的位置都会转换到屏幕中间，而不是考虑其先前的位置(参见 gif)，从而使气泡以令人讨厌的方式跳跃。

我对 forceSimulation、d3 和 react-hooks 结合使用的经验不多，很难找到任何类似的例子；所以我真的很感激任何指导。

import React, { useEffect, useRef } from 'react'
import { forceSimulation, forceX, forceY, forceCollide, select } from 'd3'

export default function Bubbles({ data, width, height }) {
  const ref = useRef()
  const svg = select(ref.current)

  useEffect(() => {
    const simulation = forceSimulation(data)
      .force('x', forceX().strength(0.02))
      .force('y', forceY().strength(0.02))
      .force(
        'collide',
        forceCollide((d) => {
          return d.value * 20 + 3
        }).strength(0.3)
      )
    simulation.on('tick', () =>
      svg
        .selectAll('circle')
        .data(data)
        .join('circle')
        .style('fill', () => 'red')
        .attr('cx', (d) => d.x)
        .attr('cy', (d) => d.y)
        .attr('r', (d) => d.value * 20)
    )
  }, [data])

  return (
    <svg
      viewBox={`${-width / 2} ${-height / 2} ${height} ${width}`}
      width={width}
      height={height}
      ref={ref}
      style={{
        marginRight: '0px',
        marginLeft: '0px'
      }}
    ></svg>
  )
}

Answer 1

我认为这里的问题是 React 渲染 SVG，但 D3 渲染圆圈。当 React 在更新时重新渲染时，它会创建 SVG 并丢弃所有子项，因为它不知道它们。

因此数据不能以通常的 D3 方式绑定(bind)到 DOM，而是应该存储在 React 组件的状态中。