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

Question

这是我第一次在React中制作图形，因此我遵循指南和文档。我没有图形学，sigma.js或 reactigma （我知道如何知道如何知道使用正常反应）。

设置文档说：

在您的应用程序中导入React Sigma样式文件。示例：导入“@react-sigma/core/lib/react-sigma.min.css”

什么是样式文件？ CSS？我该怎么做？我找不到任何文档。 Is it something basic from a previous library?

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

Answer 1

The documentation refers specifically to their own CSS file which must be imported in a React app like they are showing in the example:

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

Disclaimer: depending on your React app setup, the way to import a CSS file might differ.

---

The example in the documentation was broken when I wrote this answer.我打开关于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>
  );
};

Note that I used TypeScript for the example, which gives insightful error messages since react-sigma< /em>提供自己的类型。

然后很明显， useloadgraph 挂钩未正确使用，因为它不接受任何参数，并且返回一个函数接受 graph 参数。可以用 api文档）。

我还认为 lodash 开发人员控制台中的错误缺少。

---

请参阅文档迄今为止。