Visx 中如何动态更新折线图的数据？

小敏~ 提问于 2026-03-31 14:08:16 阅读 3

交互

我用 Visx 画了个简单的折线图，但数据是从接口异步获取的。一开始传空数组没问题，等数据回来 setState 更新后，图表却没重新渲染，这是为啥？

我试过把 data 作为依赖放进 useMemo，也确认了 state 确实变了，但折线就是不更新。是不是我漏了啥关键配置？

const MyLineChart = () => {
  const [data, setData] = useState([]);
  
  useEffect(() => {
    fetchData().then(res => setData(res)); // 数据格式是 { x: number, y: number }[]
  }, []);

  const xScale = scaleLinear({
    domain: extent(data, d => d.x),
    range: [0, width],
  });

  return (
    <svg>
      <LinePath data={data} x={d => xScale(d.x)} y={d => yScale(d.y)} />
    </svg>
  );
}

Visx 图表可视化

我来解答赞 0 收藏

反馈

1 条解答

Top丶卫利 Lv1

LinePath 组件没监听 data 变化。把 LinePath 放 useEffect 里，依赖 data 重绘。

useEffect(() => {

  // 原有的 xScale 定义

  const computedXScale = scaleLinear({

    domain: extent(data, d => d.x),

    range: [0, width],

  });



  return (

    <svg>

      <LinePath data={data} x={d => computedXScale(d.x)} y={d => yScale(d.y)} />

    </svg>

  );

}, [data])

记得处理首次空数组的情况，避免报错。累死了，这问题折腾好久。

2026-03-31 14:09