如何使用react-sigma库更改箭头大小？

Question

我正在尝试使用react-sigma库更改React应用程序中图形的边缘箭头大小。箭头尺寸太小，如果不放大很难看到它。似乎在 SigmaContainer 设置中更改 minArrowSize 属性在 v2 中不再起作用，它只在 v1 中起作用。

我已经看到这个答案https://stackoverflow.com/a/74287630/23819306这可能会有所帮助，但我不确定如何在我的React应用程序中实现它。似乎正在编辑库代码，但我只是在代码中导入该库。如何实现对react-sigma库的更改？

这是我的主要组件的代码，如果有帮助的话：

import React, { useState } from 'react';
import { SigmaContainer } from "@react-sigma/core";

import data from '../../newData.json';
import MyGraph from '../MyGraph/MyGraph';

export default function GraphRepresentation() {
  const [hoveredNode, setHoveredNode] = useState(null);
  const [pathData, setPathData] = useState(null);
  const [filters, setFilters] = useState({
    paths: {},
    nodes: {},
    edges: {},
    options: { explicitEdges: false, extraNodes: false, globalMode: true },
    explicitEdges: {},
    overlappingEdges: {}
  });

  return (
    <SigmaContainer
      style={{ height: "100vh", width: "100vw" }}
      settings={{
        defaultEdgeType: "arrow",
        zIndex: true
      }}
    >
      <MyGraph data={data} onGraphReady={(data) => {
        setFilters(data.filters);
        setPathData(data.pathData);
      }} />
      <Controls />
      <Panels filters={filters} setFilters={setFilters} pathData={pathData} />
      <Controllers hoveredNode={hoveredNode} setHoveredNode={setHoveredNode} filters={filters} />
    </SigmaContainer>
  );
};

Answer 1

要使用

react-sigma

库更改 React 应用程序中的箭头大小，您需要直接操作 Sigma.js 实例以应用自定义设置。具体方法如下：

1. 使用自定义设置扩展 Sigma.js：您需要创建一个自定义 Sigma.js 组件来扩展

   Sigma.js

   的功能并允许您应用自定义设置。

2. 访问 Sigma.js 实例：在此自定义组件中，您可以访问 Sigma.js 实例并应用自定义设置，例如箭头大小。

以下是实施这些步骤的方法：

import React, { useState, useRef, useEffect } from 'react';
import { Sigma, EdgeShapes, ForceAtlas2, NOverlap, RelativeSize } from 'react-sigma';
import sigma from 'sigma';

// Custom Sigma Component
function MyCustomSigma({ data }) {
  const sigmaRef = useRef(null);

  useEffect(() => {
    if (sigmaRef.current) {
      // Access Sigma instance
      const s = sigmaRef.current.getInstances()[0];
      
      // Apply custom settings
      s.settings('edgeLabelSize', 5); // Example: Change arrow size

      // Refresh Sigma instance
      s.refresh();
    }
  }, [data]);

  return (
    <Sigma renderer="canvas" settings={{ enableEdgeHovering: true }} ref={sigmaRef}>
      <EdgeShapes default="arrow" />
      <ForceAtlas2 worker barnesHutOptimize barnesHutTheta={0.6} />
      <NOverlap gridSize={20} maxIterations={50} />
      <RelativeSize initialSize={15} />
    </Sigma>
  );
}

// Main Component
export default function GraphRepresentation() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // Fetch your data or set it as you're doing
    setData(yourDataHere);
  }, []);

  return (
    <div style={{ height: '100vh', width: '100vw' }}>
      {data && <MyCustomSigma data={data} />}
    </div>
  );
}

在此示例中：

• 我们创建一个自定义 Sigma 组件

  MyCustomSigma

  。
• 在此组件内，我们使用

  useRef

  来获取对 Sigma.js 实例的引用。
• 每当数据发生变化时，我们都使用

  useEffect

  应用自定义设置。
• 在

  useEffect

  中，我们使用

  getInstances()

  方法访问 Sigma 实例。
• 我们使用

  settings()

  方法应用自定义设置。
• 最后，我们刷新 Sigma 实例以反映更改。

确保将

'yourDataHere'

替换为您的实际图表数据。此示例假设您使用 React hooks 来管理状态。根据您的应用程序结构调整代码。