ranking - How to Maintain the Order of Graph Elements - Stack Overflow

admin管理员组

文章数量:1122846

I successfully modeled my company's servers, but during usage, I cannot maintain the original order when the graph is redrawn. Sometimes, the graph automatically swaps the positions of the elements.

From this original state

When rendering, I tried creating the elements in the correct order and also experimented with ranking:

//ENVIRONMENT nodes
    { data: { id: 'dev', name: 'DEV',rank: 100000 }, classes: 'environment-node dev-color' },
    { data: { id: 'int', name: 'INT',rank: 200000 }, classes: 'environment-node int-color' },
    { data: { id: 'uat', name: 'UAT',rank: 300000 }, classes: 'environment-node uat-color' },
    { data: { id: 'prd', name: 'PRD',rank: 400000 }, classes: 'environment-node prd-color' },
//CLUSTER nodes
    { data: { id: 'dev1-DEV1', name: 'DEV1',rank: 100}, classes: 'cluster-node dev-color' },
    { data: { id: 'dev2-DEV2', name: 'DEV2',rank: 200 }, classes: 'cluster-node dev-color' },
    { data: { id: 'dev3-DEV3', name: 'DEV3' ,rank: 300}, classes: 'cluster-node dev-color' },
    { data: { id: 'dev4-DEV4', name: 'DEV4',rank: 400 }, classes: 'cluster-node dev-color' },
    { data: { id: 'dev5-WPS', name: 'dev5-WPS',rank: 500 },classes:'cluster-node dev-color' },
    { data: { id: 'int-WPS', name: 'WPS' ,rank: 600}, classes: 'cluster-node int-color' },
    { data: { id: 'uat-PC_85', name: 'PortalCluster_85' ,rank: 700}, classes:'cluster-node' },
    { data: { id: 'uat-WPS', name: 'WPS_Cluster',rank: 800 }, classes: 'cluster-node' },
    { data: { id: 'prd-PC_85', name: 'PortalCluster85',rank: 900 }, classes: 'cluster-node' },
    { data: { id: 'prd-WPS', name: 'WPS' ,rank: 1000}, classes: 'cluster-node prd-color' },

and using *(here trying LR and other rankers none succeded)

  layout: {
    name: 'dagre', //breadthfirst
    fit: true,
    directed: true,
    spacingFactor: .9,
    nodeSpacing: 15,
    avoidOverlap: true,
    nodeDimensionsIncludeLabels: true,
    rows: 5,
    padding: 35,
    rankdir: 'TB', //LR
    ranker: 'longest-path', //'network-simplex',tight-tree
    nodeRank: node => node.data('rank') ,
    rankSep: 70,
  },

However, I still cannot set the order correctly. This is disappointing because the entire program's usability becomes questionable; after such rearrangement, users lose track of the structure, and the program becomes difficult to use.

I would appreciate suggestions from anyone who has faced similar issues. Thank you!

本文标签： rankingHow to Maintain the Order of Graph ElementsStack Overflow