Clustering

reagraph supports the ability to cluster nodes in a graph. This is useful for visualizing large graphs where the number of nodes is too large to display on the screen at once.

Clustering is only available on the force directed layout and under the hood uses d3-force-cluster-3d .

Useage

In order to cluster nodes, you must provide a clusterAttribute property on the GraphCanvas component. For example:

const nodes = [
  { id: '1', label: 'Tesla', data: { category: 'EV' }},
  { id: '2', label: 'C8', data: { category: 'ICE' }}
];
 
const App = () => (
  <GraphCanvas
    nodes={nodes}
    edges={[]}
    clusterAttribute="category"
  />
)

Below you can see an example of the clustered graph where each node is color coded to better show the clustering.

Styling

You can change the style of the clustering ( or turn it off completely ) by setting the Theme properties. For example:

import { Theme } from 'reagraph';
 
export const darkTheme: Theme = {
  // ...Rest of your theme...
  cluster: {
 
    // Pass `null` to hide the stroke
    stroke: '#474B56',
 
    // Pass `null` to hide the labels
    label: {
      stroke: '#1E2026',
      color: '#ACBAC7'
    }
  }
};