他们的设置文档中提到的 React Sigma 样式文件是什么？

Question

这是我第一次在 React 中制作图表，所以我正在按照指南和文档进行操作。我以前没有笔迹学经验，sigma.js 或 react-sigma（我知道如何使用普通的 React）。

Import the React Sigma style file in your application. Example : import "@react-sigma/core/lib/react-sigma.min.css"

什么是样式文件？ CSS？我怎样才能做一个？我找不到任何文档。它是以前库中的一些基本内容吗？

老实说，我发现很难学习 sigma.js 并将其插入我的 React 网站。我找不到任何指南。有没有？我只想从一个简单的图表开始，然后从那里学习。

Answer 1

文档专门引用了他们自己的 CSS 文件，该文件必须像示例中所示那样导入到 React 应用程序中：

import "@react-sigma/core/lib/react-sigma.min.css";

免责声明：根据您的 React 应用程序设置，导入 CSS 文件的方式可能会有所不同。

我写这个答案时文档中的示例被破坏了。我打开了an issue on the react-sigma repo，然后就修复了。

当我尝试时，缺少一些依赖项，需要进行一些更改。

npm install @react-sigma/core sigma graphology graphology-types lodash

import { useEffect } from "react";
import Graph from "graphology";
import { SigmaContainer, useLoadGraph } from "@react-sigma/core";

// Import the style file here
import "@react-sigma/core/lib/react-sigma.min.css";

export const LoadGraph = () => {
  // first change to their example
  const loadGraph = useLoadGraph();

  // also wrapped their graph instantiation side-effect with useEffect
  useEffect(() => {
    const graph = new Graph();

    graph.addNode("first", {
      // Required position
      x: 1,
      y: 1,

      size: 15,
      label: "My first node",
      color: "#FA4F40"
    });

    // Calling the function that was missing from the example
    loadGraph(graph);
  }, [loadGraph]);

  // Returning null to get a valid component
  return null;
};

export const DisplayGraph = () => {
  return (
    <SigmaContainer style={{ height: "500px", width: "500px" }}>
      <LoadGraph />
    </SigmaContainer>
  );
};

请注意，我在示例中使用了 TypeScript，它提供了富有洞察力的错误消息，因为 react-sigma 提供了自己的类型。

然后很明显 useLoadGraph 挂钩没有正确使用，因为它不接受任何参数，并且它 returns 是一个接受 graph 参数的函数。这可以通过 API documentation.

来确认

我还发现 lodash 是开发者控制台中的错误。

请参考the documentation现在up-to-date。

他们的设置文档中提到的 React Sigma 样式文件是什么？

What is the React Sigma style file mentioned in their setup documentation?

javascript

reactjs

sigma.js