从零搭建基于 AI 问答平台(5) 词云

效果

实现步骤如下：

添加词云组件

安装:

bun add react-d3-cloud

修改 src/components/CustomWordCloud.tsx:

"use client";
import { useTheme } from "next-themes";
import { useRouter } from "next/navigation";
import React from "react";
import D3WordCloud from "react-d3-cloud";

type Props = {
  formattedTopics: { text: string; value: number }[];
};

const fontSizeMapper = (word: { value: number }) =>
  Math.log2(word.value) * 5 + 16;

const CustomWordCloud = ({ formattedTopics }: Props) => {
  const theme = useTheme();
  const router = useRouter();
  return (
    <>
      <D3WordCloud
        data={formattedTopics}
        height={550}
        font="Times"
        fontSize={fontSizeMapper}
        rotate={0}
        padding={10}
        fill={theme.theme === "dark" ? "white" : "black"}
        onWordClick={(e, d) => {
          router.push("/quiz?topic=" + d.text);
        }}
      />
    </>
  );
};

export default CustomWordCloud;

添加测试数据，修改文件 src/components/dashboard/HotTopicsCard.tsx：

const formattedTopics = [
  { text: "React", value: 100 },
  { text: "Next.js", value: 50 },
  { text: "TypeScript", value: 30 },
  { text: "GraphQL", value: 20 },
  { text: "Tailwind CSS", value: 20 },
  { text: "Node.js", value: 10 },
  { text: "Deno", value: 5 },
  { text: "Svelte", value: 5 },
];
...
    <CardContent className="pl-2">
      <CustomWordCloud formattedTopics={formattedTopics} />
    </CardContent>

---

作者：Bearalise
出处：从零搭建基于 AI 问答平台(5) 词云
版权：本文版权归作者所有
转载：欢迎转载，但未经作者同意，必须保留此段声明，必须在文章中给出原文链接。