Practical Guide to Relationship Graph Visualization: Tool Selection, Implementation with D3 and G6, and Optimization

Introduction Relationship graphs are a visual way to describe direct connections between two elements, forming networks like person‑relationship diagrams. In the Tai‑a business platform, fact graphs and intimacy graphs are implemented using relationship graph techniques to support investigation, traceability, and risk‑related workflow reviews.

1. Common Data Visualization Tools The article reviews three mainstream JavaScript visualization libraries:

ECharts : an open‑source JS library supporting 30+ chart types, with both canvas and SVG rendering. It offers rich configuration but has limited control over layout after initialization, making complex interactions cumbersome.

D3 : a low‑level data‑driven DOM manipulation library that works directly with SVG. It provides high flexibility, extensive APIs, and strong community support, but requires more code and expertise for complex graphs.

G6 : Ant Group’s graph visualization engine optimized for large‑scale data, primarily using canvas. It delivers high performance, many built‑in layouts and interactions, and a plugin system, though canvas‑based layouts can have longer transition animations.

Based on the requirements of the Tai‑a system, D3 and G6 were selected for further implementation.

2. Relationship Graph Selection Practice

2.1 Fact Graph – D3 The product goals include displaying nodes, edges, arrows, and text, supporting drag‑and‑drop, deletion, filtering, expansion, concentric layout, and hover/selection states. D3’s SVG rendering enables custom node creation and event handling, but large data volumes cause performance issues due to frequent state updates and SVG overhead.

2.2 Intimacy Graph – G6 Given node counts often exceed 200, G6’s canvas rendering was chosen for better performance. G6’s architecture consists of the core g‑core library (shapes, items, behaviors) and the higher‑level g6‑pc package providing plugins, layouts, and interactions. The Graphin wrapper further simplifies React integration.

Both libraries were used to build interactive graphs with custom behaviors, such as fixed‑position nodes during expansion and detailed link‑chain visualizations.

3. Optimization

3.1 Position‑Shift Issue To prevent unrelated nodes from moving when a target node expands, a force layout with fixed coordinates (fx/fy) is applied, updating positions via the onLayoutEnd callback.

3.2 Detail Page Layout Clarity The solution fixes entry/exit nodes on opposite canvas sides and orders relationship chains symmetrically from top to bottom, using a four‑step process: identify start/end points, extract path nodes, sort paths, and compute final positions.

Performance testing shows canvas (G6) handles large datasets more efficiently than SVG (D3), while SVG offers higher visual fidelity for smaller data.

Conclusion ECharts is suitable for common charts with moderate interaction; D3 (SVG) excels in static, high‑quality, highly customizable visualizations with small data; G6 (canvas) is optimal for large‑scale, interaction‑heavy graph scenarios. The article provides a practical reference for selecting and optimizing front‑end graph visualization solutions.