Knowledge Graph Visualization Practices and Solutions at Meituan

Knowledge‑Graph Visualization Basics

Knowledge Graph (KG) models entities and relationships as SPO triples (e.g., “Sun Wukong’s master is Tang Sanzang”). Visualizing KG data makes complex relational information readable compared with traditional charts or tables.

Scenario Analysis & Architecture Design

Three main visualization needs were identified: graph query applications (edit, sub‑graph exploration, node/edge queries), graph analysis applications (fault tracing, component dependency), and technology branding (explain AI concepts). D3.js was chosen as the base library for its flexible force‑layout engine and extensible architecture despite a higher learning curve. On top of D3.js a proprietary solution called uni‑graph was built.

Technical Challenges & Solution Design

Layout Strategies

D3’s d3‑force module (centering, collision, link‑spring, many‑body, positioning) was leveraged and extended with data‑driven force tuning. For hierarchical data, tree‑like features were extracted and force parameters preset, yielding clearer layouts than random simulations. Configurable layout presets (grid for graph DB, tiled for service chains, etc.) support domain‑specific graphs.

Hierarchical layout example clusters nodes by business‑level hierarchy and applies a custom cluster force (ClusterCenter, Strength, Radius) for more intuitive placement.

Parameter‑configurable layouts store customized force parameters per domain, enabling rapid adaptation.

Visual Noise Reduction

To reduce label overlap, occlusion detection lowers the opacity of obscured labels. Collision checks were optimized from naïve O(n!) to a grid‑based approach derived from quadtree principles, comparing only nodes within the same grid cell. For long‑text nodes the grid orientation is chosen based on average aspect ratio, further reducing checks.

Edge visual noise is addressed by a multi‑edge scattering algorithm that offsets edge angles and clips node radii, plus configurable edge styles (Bezier, arc, spin) for complex graphs.

Interaction Features

Canvas operations: drag, zoom, dynamic expansion, layout switching, multi‑node lasso.

Element operations: style configuration, hover highlight, lock, click/double‑click, right‑click menu, collapse/expand, node drag, edge type change.

Data operations: CRUD for nodes/edges, sub‑graph exploration, merge, reload.

Special interactions include path locking (auto‑computing optimal paths between selected nodes) and focus presentation (re‑layout of the focused region while keeping other areas dense).

Meituan Brain Visualization

Meituan Brain is a large‑scale KG covering food, travel, entertainment, etc. Multi‑screen adaptation uses SASS functions and mixins for non‑uniform scaling, viewport‑based units (vh/vw) and rem‑based font scaling. Pixel‑perfect alignment is achieved by overlaying design mockups on the browser.

Animation scripts were first written with setTimeout (simple but brittle) and later refactored to async function returning Promise. To gain pause/cancel capability, a generator‑based async library ( async‑eraser) and a custom EventEmitter were introduced, allowing Vue components to start, stop, and clean up animations automatically.

setTimeout(() => { /* animation step */ }, delay);

async function play() { await step1(); await step2(); }

function* animationGen() { yield* step1(); yield* step2(); }

Visual Storytelling

Visual Data Storytelling uses metaphors to turn raw data into narrative visuals. A comparison of plain text versus story‑driven graphics showed that the latter conveys context more intuitively. For sweep‑light effects, SVG gradient (better performance) and SVG mask (more flexible) were evaluated; gradient was chosen for the current use case.

3D Visualization Exploration

The team experimented with vasturiano/3d-force-graph, which builds on d3-force-3d and three.js. This provides familiarity with D3’s API and direct access to three.js objects for custom 3D development.

Node styling was enhanced with a custom shader for transparent glowing masks and high‑gloss textures, making key nodes stand out.

3D interaction includes quaternion‑based camera orbit for smooth navigation and particle scattering using requestAnimationFrame to animate particles outward.

Deployed Scenarios

The KG‑visualization solution is used in Meituan Brain, graph databases, intelligent IT operations, component‑dependency analysis, product‑tag management, and industry‑domain graphs, with plans to expand further.

Future Outlook

Interaction : efficient 3D interaction techniques and VR/Metaverse integration.

Effect Presentation : handling massive KG visualizations with WebGL/WebGPU while preserving discoverability; intelligent layout prediction based on data features.

Tooling : defining a universal visual query language to enable a single visualizer to work across different KG storage engines.

References

https://d3js.org/

https://github.com/vasturiano/d3-force-3d

https://github.com/vasturiano/3d-force-graph

https://2050.earth/

https://en.wikipedia.org/wiki/Quadtree

https://animejs.com/documentation/#staggeringBasics

https://cubic-bezier.com/