Small layout adjustment.

This commit is contained in:
Kia Lam 2022-02-23 12:37:20 -08:00
parent 7ebf6b77e5
commit 7fbab6760e
2 changed files with 6 additions and 13 deletions

View File

@ -59,12 +59,11 @@ function MeshGraph({ data, showLegend, zoom, setShowZoomControls }) {
const graph = data;
const simulation = d3
.forceSimulation(graph.nodes)
.forceSimulation()
.nodes(graph.nodes)
.force(
'charge',
d3
.forceManyBody(MESH_FORCE_LAYOUT.defaultForceBody)
.strength(MESH_FORCE_LAYOUT.defaultForceStrength)
d3.forceManyBody().strength(MESH_FORCE_LAYOUT.defaultForceStrength)
)
.force(
'link',

View File

@ -1,30 +1,24 @@
export const SELECTOR = '#chart';
export const PARENTSELECTOR = '.mesh-svg';
export const CHILDSELECTOR = '.mesh';
export const DEFAULT_RADIUS = 16;
export const MESH_FORCE_LAYOUT = {
defaultCollisionFactor: 80,
defaultForceStrength: -100,
defaultForceBody: 75,
defaultCollisionFactor: DEFAULT_RADIUS * 2 + 20,
defaultForceStrength: -30,
defaultForceX: 0,
defaultForceY: 0,
};
export const DEFAULT_RADIUS = 16;
export const DEFAULT_NODE_COLOR = '#0066CC';
export const DEFAULT_NODE_HIGHLIGHT_COLOR = '#16407C';
export const DEFAULT_NODE_LABEL_TEXT_COLOR = 'white';
export const DEFAULT_FONT_SIZE = '12px';
export const LABEL_TEXT_MAX_LENGTH = 15;
export const MARGIN = 15;
export const FALLBACK_WIDTH = 700;
export const NODE_STATE_COLOR_KEY = {
disabled: '#6A6E73',
healthy: '#3E8635',
error: '#C9190B',
};
export const NODE_STATE_HTML_ENTITY_KEY = {
disabled: '\u25EF',
healthy: '\u2713',