I'm curious about the layout with regularity!

[MICCT]

Currently, I am developing using various layouts. What I want is to have regularity and to create various patterns by clustering connected nodes. While I was able to achieve regularity using the concentric layout, there is an issue where the distance between connected nodes becomes too large and the layout becomes irregular. Is there a layout that can create a consistent pattern where connected nodes are clustered together?

I wanted it to be implemented like the image below, but it didn't work out.

Below is the test source code I am currently using.

var cy = cytoscape({
      container: document.getElementById('cy'),
      elements:
      {
        nodes: [
          { data: { id: 'main', name: '홍길동', weight: 150} },
          { data: { id: 'L1-1', name: 'DGB Account', weight: 95} },
          { data: { id: 'L1-2', name: 'Shinhan Account', weight: 95} },
          { data: { id: 'L1-3', name: 'a national card', weight: 95} },
          { data: { id: 'L1-4', name: 'Smart banking', weight: 95} },
          { data: { id: 'L1-5', name: 'ATM', weight: 95} },
          { data: { id: 'L2-1', name: 'transfer', weight: 80} },
          { data: { id: 'L2-2', name: 'regular transfer', weight: 80} },
          { data: { id: 'L2-3', name: 'fraudulent account', weight: 80} },
          { data: { id: 'L2-4', name: 'a different deal', weight: 80} },
          { data: { id: 'L2-5', name: 'ETC1', weight: 80} },
          { data: { id: 'L2-6', name: 'ETC2', weight: 80} },
          { data: { id: 'L3-1', name: 'salary', weight: 65} },
          { data: { id: 'L3-2', name: 'Card value', weight: 55} },
          { data: { id: 'L3-3', name: 'OTT', weight: 75} },
          { data: { id: 'L4-1', name: 'A1', weight: 55} },
          { data: { id: 'L4-2', name: 'A2', weight: 55} },
        ],
        edges: [
          { data: { source: 'L1-1', target: 'main'} },
          { data: { source: 'L1-2', target: 'main'} },
          { data: { source: 'L1-3', target: 'main'} },
          { data: { source: 'L1-4', target: 'main'} },
          { data: { source: 'L1-5', target: 'main'} },
          { data: { source: 'L1-5', target: 'main'} },
          { data: { source: 'L2-1', target: 'L1-1'} },
          { data: { source: 'L2-2', target: 'L1-1'} },
          { data: { source: 'L2-3', target: 'L1-1'} },
          { data: { source: 'L2-5', target: 'L1-4'} },
          { data: { source: 'L2-6', target: 'L1-4'} },
          { data: { source: 'L2-4', target: 'L1-5'} },
          { data: { source: 'L3-1', target: 'L2-1'} },
          { data: { source: 'L3-2', target: 'L2-1'} },
          { data: { source: 'L3-3', target: 'L2-1'} },
          { data: { source: 'L4-1', target: 'L3-1'} },
          { data: { source: 'L4-2', target: 'L3-1'} },
        ]
      },

      style: [
        {
          selector: 'node',
          style: {
            'label': 'data(name)',
            'text-valign': 'center',
            'color': '#fff',
            'background-color': '#61bffc',
            'text-outline-width': 3,
            'text-outline-color': '#888'
          }
        },
        {
          selector: 'edge',
          style: {
            'width': 2,
            'line-color': '#ccc',
            'target-arrow-color': '#ccc',
            'target-arrow-shape': 'triangle'
          }
        }
      ],
      layout: {
        name: 'concentric',
        spacingFactor: 3,
        concentric: function( node ){
          return node.data("weight")
        },
        levelWidth: function( nodes ){ 
          	return 2;
        },
        avoidOverlap: true, 
    	neighborhoodRadius: 150 
      }
    });

[mikekucera]

I believe our policy is that questions like these should be posted on StackOverflow. Its more likely to get an answer there because I'm the only one currently moderating this issue tracker and I don't know the answer to your question. A JSbin example also helps.

https://stackoverflow.com/questions/ask?tags=cytoscape.js

Thank you.