如何用JGraphX绘制含分组的层级图？Swing布局问题排查

我在Swing应用中使用JGraphX绘制层级图，目标是实现含分组的有向图效果（参考示例图1）。但当前实现的图中，"Bottom"节点未显示在分组下方，而是位于侧边（参考示例图2）。请帮忙排查代码问题，或推荐可实现该效果的Java绘图库。

当前代码 #

import com.mxgraph.layout.hierarchical.mxHierarchicalLayout;
import com.mxgraph.swing.mxGraphComponent;
import com.mxgraph.view.mxGraph;

import javax.swing.*;
import java.awt.*;

public class StaticGraphTest extends JFrame {
    public StaticGraphTest() {
        mxGraph graph = new mxGraph();
        Object parent = graph.getDefaultParent();

        graph.getModel().beginUpdate();
        try {
            Object item1 = graph.insertVertex( parent, null, "Top", 0, 0, 80, 30 );
            Object grouping = graph.insertVertex( parent, null, "", 0, 0, 80, 100 );
            graph.insertEdge( parent, null, "", item1, grouping );

            //Add items inside grouping
            Object sub1 = graph.insertVertex( grouping, null, "Subitem A", 0, 0, 80, 30 );
            graph.insertEdge( grouping, null, "", grouping, sub1 );
            Object sub2 = graph.insertVertex( grouping, null, "Subitem B", 0, 0, 80, 30 );
            graph.insertEdge( grouping, null, "", grouping, sub2 );
            
            Object item2 = graph.insertVertex( parent, null, "Bottom", 0, 0, 80, 30 );
            graph.insertEdge( parent, null, "", grouping, item2 );

            mxHierarchicalLayout layout = new mxHierarchicalLayout( graph );
            //layout.setResizeParent( true );
            layout.setOrientation( SwingConstants.NORTH );
            layout.execute( parent );
        } finally {
            graph.getModel().endUpdate();
        }

        mxGraphComponent graphComponent = new mxGraphComponent( graph );

        //graphComponent.setEnabled( false ); //Make diagram read-only
        getContentPane().setLayout( new BorderLayout() );
        getContentPane().add( graphComponent, BorderLayout.CENTER );
    }

    public static void main( String[] args ) {
        EventQueue.invokeLater( ()->{
            StaticGraphTest frame = new StaticGraphTest();
            frame.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE );
            frame.setSize( 400, 320 );
            frame.setVisible( true );
        } );
    }
}

代码问题排查与修复 #

核心问题点 #

1. 分组与子节点的错误边关系：给分组容器到内部子节点添加了边，这会让层级布局将分组和子节点判定为上下层级，而非容器包含关系，导致布局逻辑混乱。
2. 未启用分组自动调整：注释掉了layout.setResizeParent(true);，无法让布局根据子节点自动调整分组容器的大小和位置。
3. 间距参数缺失：没有配置分组边框间距、层级间距等参数，导致布局拥挤或错位。

修复后的代码 #

import com.mxgraph.layout.hierarchical.mxHierarchicalLayout;
import com.mxgraph.swing.mxGraphComponent;
import com.mxgraph.view.mxGraph;

import javax.swing.*;
import java.awt.*;

public class StaticGraphTest extends JFrame {
    public StaticGraphTest() {
        mxGraph graph = new mxGraph();
        Object parent = graph.getDefaultParent();

        graph.getModel().beginUpdate();
        try {
            Object item1 = graph.insertVertex(parent, null, "Top", 0, 0, 80, 30);
            // 初始分组大小设为自适应，让布局自动调整
            Object grouping = graph.insertVertex(parent, null, "", 0, 0, 80, 30);
            graph.insertEdge(parent, null, "", item1, grouping);

            // 子节点直接插入分组，无需额外边
            Object sub1 = graph.insertVertex(grouping, null, "Subitem A", 0, 0, 80, 30);
            Object sub2 = graph.insertVertex(grouping, null, "Subitem B", 0, 0, 80, 30);

            Object item2 = graph.insertVertex(parent, null, "Bottom", 0, 0, 80, 30);
            graph.insertEdge(parent, null, "", grouping, item2);

            mxHierarchicalLayout layout = new mxHierarchicalLayout(graph);
            // 开启分组容器自动调整
            layout.setResizeParent(true);
            // 设置分组边框与子节点的间距
            layout.setParentBorder(10);
            // 层级方向设为从上到下
            layout.setOrientation(SwingConstants.NORTH);
            // 设置上下层级节点的间距
            layout.setInterRankCellSpacing(40);
            // 设置同层级节点的横向间距
            layout.setIntraCellSpacing(20);
            layout.execute(parent);
        } finally {
            graph.getModel().endUpdate();
        }

        mxGraphComponent graphComponent = new mxGraphComponent(graph);

        getContentPane().setLayout(new BorderLayout());
        getContentPane().add(graphComponent, BorderLayout.CENTER);
    }

    public static void main(String[] args) {
        EventQueue.invokeLater(() -> {
            StaticGraphTest frame = new StaticGraphTest();
            frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
            frame.setSize(400, 400); // 调整窗口大小避免内容截断
            frame.setVisible(true);
        });
    }
}

修复说明 #

• 移除分组到子节点的边：仅通过insertVertex(grouping, ...)建立容器包含关系，让布局正确识别分组逻辑。
• 启用setResizeParent(true)：自动调整分组容器的尺寸以适配内部子节点。
• 增加间距配置：优化布局的层次感和美观度，避免节点重叠或拥挤。
• 调整窗口初始大小：确保完整显示所有节点和连线。

备选Java绘图库推荐 #

• JGraphT + SwingXGraphViewer：JGraphT专注于图数据结构实现，配合SwingXGraphViewer可快速搭建支持分组、层级布局的Swing图可视化，配置灵活。
• GraphStream：支持静态/动态图绘制，与Swing集成友好，内置多种布局算法，分组布局配置简单直观。
• Prefuse：基于Java2D的可视化库，提供丰富的定制化能力，适合需要高度自定义的层级图、分组图场景。

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