初始保存后，從 JSON 動態創建節點不起作用

[英]Dynamically creating nodes from JSON does not work after initial save

我是新手，嘗試使用基於 JSON 的 ReactFlow 動態創建節點。使用下面的代碼，我將保存我的 index.tsx 並按下一個調用 onAdd function 的按鈕，它會工作（創建預期的節點） . 但是，一旦我刷新瀏覽器，該按鈕就會停止工作。 我沒有嘗試太多，我一直在嘗試用谷歌搜索這個問題 ...

如何在不單擊控件 fitView 的情況下將 React-Flow 項目的視口重置為 fitView？

[英]How can I reset the viewport of my React-Flow project to fitView, without clicking the Controls fitView?

我正在做一個 React-Flow 項目。 我正在使用按鈕更改節點和邊緣的布局，我希望最后一件事是將視口重置為居中（所以只需 fitView）。 我怎樣才能做到這一點？ 我試過再次調用 fitView() 但這似乎根本不起作用。 ...

React 流程：自定義組節點示例

[英]React flow: custom group node example

我正在研究 React Flow 庫文檔，並試圖弄清楚是否有辦法創建我自己的節點，該節點將成為一個組（我想為子節點之前的節點實現自定義標題 styles）。 我沒有在文檔中找到任何內容 - 無論是在Docs/Sub flow section 中，還是在Api/Custom nodes 中。 作為實現 ...

如何在反應流中相互交叉時重新定位節點

[英]how to reposition nodes when they are intersecting with each other in react flow

當在反應流中將 node1 拖到 node2 上時，node2 將與 node1 重疊。 但我希望它向右移動，這樣節點之間就不會重疊預期結果是 node2 右移。 ...

運行 reactflow v11 版本時出現 react/jsx-runtime 錯誤

[英]Getting react/jsx-runtime error whiile running reactflow v11 version

failedModules=sg-lineage-ui/js/sg-lineage-ui:Script error for "react/jsx-runtime" 已經嘗試將以下內容的最新版本添加到 package.json，但也沒有用： ...

導入 reactflow v11 導致錯誤“模塊解析失敗：意外令牌”

[英]Importing reactflow v11 causes error "module parse failed: unexpected token"

當我安裝reactflow (v11.2.0) 時，當我從該庫中導入任何內容時出現以下錯誤： 例如，嘗試導入以下內容： 這是通過 npm 安裝的，我嘗試刪除 package-lock.json 和 node_modules 並重新安裝所有內容，但似乎沒有任何效果。 使用相同的代碼在 v10（rea ...

反應流渲染器和可移動元素 position 和比例不保持不變

[英]React flow renderer and moveable element position and scale not staying the same

嗨，我在使用 react-moveable 和 react-flow-renderer 來使我的元素既可移動又可擴展時遇到了一些困難。 在我目前的位置，我可以縮放和旋轉元素，但是在此之后，當我嘗試移動它們時，縮放和旋轉會恢復，並且它們會移動到不同的 x 和 y position，而不是停留在用戶縮放 ...

使用鼠標調整 react-flow-renderer 中的組類型節點

[英]Resize Group type node in react-flow-renderer using mouse

我想在單擊按鈕時添加子流（組類型節點），稍后用鼠標調整它的大小，並通過拖放在該組內添加節點。 我搜索了很多，但我發現你已經設置了parentNode of child 來執行此操作。 我希望通過鼠標拖放來實現所有這些。 免費版的React-flow-renderer可以嗎？ 編輯 SandBox-& ...

React Flow 和 Zoom Pane 錯誤問題

[英]Issue with React Flow and Zoom Pane error

我在我的 React 項目中工作時遇到了一些 React Flow 問題。 我讓它在另一個項目中工作，我想將一些功能遷移到另一個項目，但是當我這樣做時，我得到以下...... 我認為我之前的東西可能有某種缺陷，我在原版中有 mui，在另一個中有 ant，所以我用一個例子來測試它是否存在。 我使用了它 ...

如何在 nodejs 中創建基於低代碼的工作流設置？

[英]How to create low code based workflow setup in nodejs?

我想創建一個活動進入的工作流自動化，用戶可以設置多級工作流。 對於前端，我使用的是https://reactflow.dev 如何在 nodejs 后端構建事物。 諸如數據庫、訪問控制流語句、需要 cron 的語句之類的東西。 ...

反應流渲染器防止特定節點被刪除

[英]React flow renderer prevent specific node from being deleted

有沒有辦法防止特定節點被刪除？ 我已經設置了 deleteKeyCode={'Delete'} 但想從這里按類型排除一個節點。 ...

使用 REACTFLOW 的自定義節點； 創建節點后，將其他數據保存到節點

[英]Custom nodes with REACTFLOW; saving additional data to a node once the node is created

這是我對react-flow的第一次介紹。 我希望創建一個自定義節點，創建后，用戶可以在節點中輸入信息並保存/顯示它。 從自定義節點上的react-flow文檔中，他們有一個類似的示例，他們創建了一個TextUpdaterNode ，該console.logs用戶輸入。 我沒有通過控制台記錄它，而是 ...

在 React 應用程序中更新 d3 的力導向圖，同時保留舊節點位置

[英]Update d3's force-directed graph in a React app while preserving old nodes positions

我正在使用 d3 的forceSimulation來計算給定力的每個節點的 (x,y) 坐標（從沒有節點或鏈接開始）： 然后聽simulation的 'tick' 事件來更新圖形（使用 react-flow-renderer setNodes和setSetEdges見文檔）： React 部分應該 ...

在反應流中平移時如何將光標設置為“抓取”？

[英]How can I set the cursor to 'grabbing' when panning in react-flow?

我正在使用 react-flow，用戶可以通過在背景上單擊和拖動來平移。 我希望光標在背景上懸停時為“抓取”，當用戶按下鼠標按鈕並拖動/平移時，光標為“抓取”。 什么工作： 通過在ReactFlow上設置樣式，我已經能夠在將鼠標懸停在背景上時將光標“抓取”，如下所示： 什么不起作用： 在背 ...

創建連接到圓形元素的 SVG 路徑（帶箭頭）

[英]Create an SVG path (w/ arrow) connecting to a circle element

我有一個圖，其中源和目標元素（“節點”）是圓形的，這兩個（“邊緣”）之間的連接必須是一個箭頭，從源節點的中心開始並指向邊緣目標圈子。 我確實有源節點和目標節點（圓心）的精確坐標，並且知道目標節點的半徑。 連接它們（從源圓的中心開始到目標圓的中心結束的路徑）非常簡單： M ${sourceX},${s ...

在單擊事件的反應函數組件中定義的調用函數形成另一個函數組件 - React.js

[英]Calling function defined within a react function component on a click event form another function component - React.js

我正在函數（prepareNodes）中構造一些節點對象以傳遞給功能組件A（比如說）中的React Flow，並且我定義了一個無狀態的自定義節點組件（CardNode），它有一個按鈕。 單擊按鈕時，它應該觸發組件 A 中定義的函數（prepareNodes）。 我在網上找了一些參考資料，他們中的 ...

在反應中添加新庫的性能影響

[英]Performance implications of adding a new library in react

我正在嘗試構建一個流程圖組件，並且我正在嘗試決定是否應該使用 svgs 從頭開始​​構建它，或者使用像 react flow 這樣的現有庫。 每種方法的優缺點是什么？ 將另一個包添加到現有應用程序包對性能有何影響，我該如何衡量？ npm 包中的漏洞如何影響一個人是否使用庫的決定？ 每種方法 ...

如何使邊緣出現在 React Flow 中的節點上方？

[英]How to make edges appear above nodes in React Flow?

我正在使用反應流 v9，我想讓邊緣出現在節點上方。 我嘗試將節點的 zIndex 設置為 0 或將邊緣的 zIndex 設置為 100，但它們似乎不起作用。 它們總是默認返回 z-index 為 3 的節點和 z-index 為 2 的邊。 有沒有辦法獲得這種行為？ ...

在 next.js 中實現力導向圖

[英]Implement force-directed graph in next js

我正在嘗試創建一個force-directed graph來映射機構中課程之間的交互。 在我的前端使用 Next JS + TypeScript。 已經嘗試使用react-flow 、 dagre 、 vis.network進行多次嘗試，但得到的不是window: undefined錯誤，就是該死的 ...

React-Flow：您可以將道具傳遞給 React-Flow 中的自定義節點嗎？

[英]React-Flow: Can you pass props to a custom node in React-Flow?

我正在使用 React-Flow 來可視化 React 中組件的樹狀層次結構。 每當您在 React-Flow 中創建自定義節點時，您都可以像這樣在樹中使用它： 這使得無法傳遞道具。 假設我想傳遞一些東西，那么如果語法類似於reactComponent: <ComponentNode myP ...