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 graph = data;
const simulation = d3 const simulation = d3
.forceSimulation(graph.nodes) .forceSimulation()
.nodes(graph.nodes)
.force( .force(
'charge', 'charge',
d3 d3.forceManyBody().strength(MESH_FORCE_LAYOUT.defaultForceStrength)
.forceManyBody(MESH_FORCE_LAYOUT.defaultForceBody)
.strength(MESH_FORCE_LAYOUT.defaultForceStrength)
) )
.force( .force(
'link', 'link',

View File

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