MXGraph如何创建无需顶点、可自由放置的边？mxCell用法求助

Great question! You’re right that graph.addEdge() enforces source and target vertices, but using mxCell directly lets you create edges that aren’t tied to any nodes—exactly like the free edges you see in draw.io or other graphic editors. Here’s a step-by-step breakdown to make this work:

Core Concept #

MXGraph edges are just specialized mxCell instances marked as edges (cell.edge = true). The key is defining their geometry with absolute coordinate points instead of relying on source/target vertices to position them. This gives you full control over where the edge is placed and how it’s shaped.

Step-by-Step Implementation #

1. Configure the Edge Cell #

First, create an mxCell and mark it as an edge. Then define its path using an array of mxPoint objects for the edge’s waypoints.

2. Add the Cell to the Graph Model #

Use the graph’s model to add the cell (since graph.addEdge() isn’t suitable here). Always wrap changes in a model transaction to ensure proper rendering and undo support.

Here’s a complete, working code example:

// Initialize your graph instance
const graph = new mxGraph(container);
const model = graph.getModel();

// Start a transaction to batch changes (critical for proper rendering)
model.beginUpdate();
try {
    // Get the default parent container for all graph elements
    const parent = graph.getDefaultParent();

    // Create a new mxCell for the free edge
    // Parameters: cell value, geometry, style string
    const freeEdge = new mxCell(
        null, 
        new mxGeometry(0, 0, 0, 0), 
        'strokeColor=#2c3e50;strokeWidth=2;bendable=1;'
    );
    
    // Mark the cell as an edge (this tells MXGraph how to treat it)
    freeEdge.edge = true;

    // Define the edge's path using absolute coordinates
    // Adjust these points to place your edge exactly where you want
    freeEdge.geometry.points = [
        new mxPoint(80, 80),    // Start point
        new mxPoint(180, 130),  // Middle waypoint (for a bent edge)
        new mxPoint(280, 80)    // End point
    ];

    // Add the edge to the graph model
    model.addCell(freeEdge, parent);
} finally {
    // End the transaction to apply all changes
    model.endUpdate();
}

Key Customizations & Tips #

• Styling: Modify the style string to change the edge’s look. For example:
  • 'strokeColor=#e74c3c;strokeWidth=3;' for a thick red edge
  • 'edgeStyle=elbowEdgeStyle;' for automatic right-angle bends
  • 'dashed=1;' for a dashed line
• Interactive Editing: Enable users to drag waypoints or reshape the edge with:

  graph.setAllowDanglingEdges(true); // Allows edges without source/target
  graph.setEdgeLabelsMovable(true); // Optional: lets users move edge labels
  

• Dynamic Updates: To adjust the edge’s path later, update the points array and call model.updateCell(freeEdge) inside another transaction.

Why This Works #

By setting freeEdge.edge = true, MXGraph recognizes the cell as an edge even without source/target vertices. The geometry.points array defines the exact path of the edge in the graph’s coordinate system, so it can be placed anywhere independently of nodes.

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