reactjs - D3.js data() 键绑定

Question

这是我第一次使用D3.js在 React 应用程序中构建条形图。我的组件非常简单：它获取数据并绘制条形图。我想向我的酒吧添加键，但是当我尝试在data()功能中执行此操作时，它失败了=> entry.item

对象的类型为“未知”。TS2571

...
 svg
      .selectAll(".bar")
      .data( data, entry => entry.item )
      .join("rect")
...

我data的是这种类型：

export interface DataFormat {
  item: string;
  region: string;
  data: number;
}

我不明白我做错了什么，因为data()显示的类型定义：

data<NewDatum>(data: NewDatum[], key?: ValueFn<GElement | PElement, Datum | NewDatum, string>): Selection<GElement, NewDatum, PElement, PDatum>;

UPD：这是如何data定义的

export interface ChartProps {
  data: DataFormat[];
}

export const Chart = (props:ChartProps) => {
  const { data } = props;

并在父组件中作为道具传递：

export const Wrapper = () => {
  const [currentYear, setCurrentYear] = useState<number>(INITIAL_YEAR);
  const [dataMax, setDataMax] = useState<number>(0);
  const [data, setData] = useState<DataFormat[]>(initialData);

  useEffect(() => {
    if( currentYear <= FINAL_YEAR ) {
      setTimeout(() => setCurrentYear(currentYear+1), 200);
    }
  }, [currentYear]);

  useEffect(() => {
    const data: DataFormat[] = populationData.data
      .map((dataitem) => {
        return {
          item: dataitem.item,
          data: dataitem.data[currentYear],
          region: dataitem.region,
          image: dataitem.image,
        };
      })
      .sort((a, b) => b.data - a.data)
      .slice(0, TOP);
    setData(data);
    setDataMax(Math.max(...data.map((item) => item.data)));
  }, [currentYear]);

  return (
    <Chart data={data} />
  );
};

标签： reactjstypescriptd3.js