如何调整ReactFlow节点中标签的位置与旋转角度？

要实现将ReactFlow节点标签移至左侧并旋转90度的效果，核心是通过自定义节点组件配合CSS样式调整来完成，以下是具体实现步骤：

1. 创建自定义节点组件 #

ReactFlow默认节点的标签布局无法满足需求，需要自定义节点来控制标签位置：

import React from 'react';
import { Handle, Position } from 'reactflow';

const CustomNode = ({ data }) => {
  return (
    <div className="custom-node">
      <Handle type="target" position={Position.Left} />
      <div className="node-label">{data.label}</div>
      <Handle type="source" position={Position.Right} />
    </div>
  );
};

export default CustomNode;

2. 添加CSS样式控制布局与旋转 #

通过绝对定位和CSS变换实现标签的位置调整与旋转：

.custom-node {
  position: relative;
  width: 180px;
  height: 60px;
  border: 1px solid #ddd;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
}

.node-label {
  position: absolute;
  left: -60px;
  transform: translateY(-50%) rotate(-90deg);
  white-space: nowrap;
  font-size: 14px;
}

3. 在ReactFlow中使用自定义节点 #

注册自定义节点类型并应用到流程图中：

import React, { useState } from 'react';
import ReactFlow, { addEdge, Background, Controls } from 'reactflow';
import 'reactflow/dist/style.css';
import CustomNode from './CustomNode';

const nodeTypes = {
  custom: CustomNode,
};

const initialNodes = [
  {
    id: '1',
    type: 'custom',
    position: { x: 250, y: 50 },
    data: { label: '示例标签' },
  },
];

const FlowDemo = () => {
  const [nodes, setNodes] = useState(initialNodes);
  const [edges, setEdges] = useState([]);

  const onEdgesChange = (changes) => setEdges((eds) => addEdge(changes, eds));

  return (
    <div style={{ height: '500px', width: '100%' }}>
      <ReactFlow
        nodes={nodes}
        edges={edges}
        onEdgesChange={onEdgesChange}
        nodeTypes={nodeTypes}
      >
        <Background />
        <Controls />
      </ReactFlow>
    </div>
  );
};

export default FlowDemo;

关键调整点 #

• 若需要顺时针旋转标签，将rotate(-90deg)改为rotate(90deg)
• 调整left属性值可以控制标签与节点之间的间距，根据实际需求微调
• 如果节点尺寸不同，需要同步调整.custom-node的宽高以及标签的定位参数

内容的提问来源于stack exchange，提问作者anuj