每次组件重新渲染时图表都会重复 - Sunburst-chart

Question

我在我的 React 应用程序中使用 https://www.npmjs.com/package/sunburst-chart 并使用数据调用 useEffect 中的图表方法，并在依赖项数组中传递数据变量。最初，它的渲染正确。但是，每当数据更新时，它不会更新图表，而是在每次 useEffect 调用时创建新图表。我怎样才能解决这个图表重复问题，而不是它，我需要更新图表。

import React, { useEffect, useRef, useState } from 'react'
import Sunburst from 'sunburst-chart'
import * as d3 from 'd3'

const SunburstChart = ({ data }) => {
  const color = d3.scaleOrdinal(d3.schemePaired)

  useEffect(() => {
      Sunburst()
        .data(data)
        .width(740)
        .height(740)
        .sort((a, b) => b.value - a.value)
        .color((d) => color(d.name))
        .excludeRoot(true)(document.getElementById('chart-sunburst'))
    }
  }, [data])

  return (
    <div id="chart-container">
      <div id="chart-sunburst"></div>
    </div>
  )
}

export default SunburstChart

您可以在这里找到实现 - https://codesandbox.io/s/snowy-feather-jz5upc?file=/src/App.js

Answer 1

用 kapsule 包裹旭日图似乎可以解决重复问题。请参阅我在此线程

上的回答