cytoscape. js и dagre приводят к тому, что один узел неудобно расположен - PullRequest
Новая
       23

cytoscape. js и dagre приводят к тому, что один узел неудобно расположен

1 голос
/ 24 марта 2020

Учитывая приведенный цитопробег. js фрагмент ниже, используя странную раскладку, может кто-нибудь объяснить, почему узел № 2 располагается справа внизу, а не в порядке, как остальные? 

var cy = cytoscape({
  container: document.getElementById('cy'),
  elements: [{
      data: {
        id: 1477,
        label: "Heading",
      },
    },
    {
      data: {
        id: 1483,
        label: "Number 2",
        parent: 1479,
      },
    },
    {
      data: {
        id: 1479,
        label: "Group",
      },
    },
    {
      data: {
        id: 1478,
        label: "Number 0",
        parent: 1479,
      },
    },
    {
      data: {
        id: 1480,
        source: 1477,
        target: 1478,
        minLen: 1,
      },
    },
    {
      data: {
        id: 1484,
        source: 1481,
        target: 1483,
        minLen: 1,
      },
    },
    {
      data: {
        id: 1481,
        label: "Number 1",
        parent: 1479,
      },
    },
    {
      data: {
        id: 1482,
        source: 1478,
        target: 1481,
        minLen: 1,
      },
    },
    {
      data: {
        id: 1487,
        label: "Number 4",
        parent: 1479,
      },
    },
    {
      data: {
        id: 1485,
        label: "Number 3",
        parent: 1479,
      },
    },
    {
      data: {
        id: 1486,
        source: 1483,
        target: 1485,
        minLen: 1,
      },
    },
    {
      data: {
        id: 1488,
        source: 1485,
        target: 1487,
        minLen: 1,
      },
    },
    {
      data: {
        id: 1490,
        source: 1487,
        target: 1489,
        minLen: 1,
      },
    },
    {
      data: {
        id: 1489,
        label: "Number 5",
        parent: 1479,
      },
    },
    {
      data: {
        id: 1491,
        label: "Final",
      },
    },
    {
      data: {
        id: 1492,
        source: 1489,
        target: 1491,
        minLen: 1,
      },
    },
  ],
  layout: {
    name: 'dagre',
    'nodeSep': 25,
    'rankSep': 10,
  },
  style: [{
      selector: 'node',
      style: {
        label: 'data(label)',
        'text-valign': 'center',
        'text-halign': 'right',
        'text-margin-x': '-155',
        'text-wrap': 'wrap',
        'text-max-width': 150,
        'width': 180,
        'background-fit': 'contain',
        'shape': 'roundrectangle',
        'background-opacity': 0,
        'background-position-x': 0,
        'height': 24,
        'border-width': 1,
        'padding-right': 5,
        'padding-left': 5,
        'padding-top': 5,
        'padding-bottom': 5,
        'text-events': 'yes',
        'font-size': 12,
      }
    },
    {
      selector: 'edge',
      style: {
        'width': 1,
        'curve-style': 'bezier',
        'line-color': 'black',
        'line-style': 'solid',
        'target-arrow-shape': 'triangle-backcurve',
        'target-arrow-color': 'black',
        'text-rotation': 'autorotate',
        'label': 'data(label)',
      }
    },
    {
      selector: '$node > node',
      style: {
        'text-rotation': '-90deg',
        'text-halign': 'left',
        'text-margin-x': -10,
        'text-margin-y': -40,
      }
    },
    {
      selector: '.Badge',
      style: {
        'border-width': 3,
      }
    },
  ],
  minZoom: 0.5,
  maxZoom: 1.5,
  zoomingEnabled: true,
  userZoomingEnabled: false,
  autoungrabify: false,
  autounselectify: true,
});
body { 
  font: 14px helvetica neue, helvetica, arial, sans-serif;
}

#cy {
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.2.5/cytoscape.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/dagre/0.8.5/dagre.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/cytoscape-dagre@2.2.2/cytoscape-dagre.min.js"></script>


<div id="cy"></div>

1 Ответ

3 голосов
/ 24 марта 2020

С небольшой перестройкой вы можете легко заставить это работать. Как правило, лучше группировать элементы по узлам и ребрам, также в порядке возрастания. Это улучшает читабельность и, в этом случае, предотвращает несогласованность макетов.

Я думаю, что проблема здесь заключается в том, что ребра добавляются на график до появления соответствующего узла (узла Number 2).

Вот рабочий код: 

var cy = cytoscape({
  container: document.getElementById('cy'),
  elements: {

    nodes: [{
        data: {
          id: 1477,
          label: "Heading",
        },
      },
      {
        data: {
          id: 1479,
          label: "Group",
        },
      },
      {
        data: {
          id: 1478,
          label: "Number 0",
          parent: 1479,
        },
      },
      {
        data: {
          id: 1481,
          label: "Number 1",
          parent: 1479,
        },
      },
      {
        data: {
          id: 1483,
          label: "Number 2",
          parent: 1479,
        },
      },
      {
        data: {
          id: 1485,
          label: "Number 3",
          parent: 1479,
        },
      },
      {
        data: {
          id: 1487,
          label: "Number 4",
          parent: 1479,
        },
      },
      {
        data: {
          id: 1489,
          label: "Number 5",
          parent: 1479,
        },
      },
      {
        data: {
          id: 1491,
          label: "Final",
        },
      },
    ],
    edges: [{
        data: {
          id: 1480,
          source: 1477,
          target: 1478,
          minLen: 1,
        },
      },
      {
        data: {
          id: 1482,
          source: 1478,
          target: 1481,
          minLen: 1,
        },
      },
      {
        data: {
          id: 1484,
          source: 1481,
          target: 1483,
          minLen: 1,
        },
      },
      {
        data: {
          id: 1486,
          source: 1483,
          target: 1485,
          minLen: 1,
        },
      },
      {
        data: {
          id: 1488,
          source: 1485,
          target: 1487,
          minLen: 1,
        },
      },
      {
        data: {
          id: 1490,
          source: 1487,
          target: 1489,
          minLen: 1,
        },
      },

      {
        data: {
          id: 1492,
          source: 1489,
          target: 1491,
          minLen: 1,
        },
      }
    ]
  },
  layout: {
    name: 'dagre',
    'nodeSep': 25,
    'rankSep': 10,
  },
  style: [{
      selector: 'node',
      style: {
        label: 'data(label)',
        'text-valign': 'center',
        'text-halign': 'right',
        'text-margin-x': '-155',
        'text-wrap': 'wrap',
        'text-max-width': 150,
        'width': 180,
        'background-fit': 'contain',
        'shape': 'roundrectangle',
        'background-opacity': 0,
        'background-position-x': 0,
        'height': 24,
        'border-width': 1,
        'padding-right': 5,
        'padding-left': 5,
        'padding-top': 5,
        'padding-bottom': 5,
        'text-events': 'yes',
        'font-size': 12,
      }
    },
    {
      selector: 'edge',
      style: {
        'width': 1,
        'curve-style': 'bezier',
        'line-color': 'black',
        'line-style': 'solid',
        'target-arrow-shape': 'triangle-backcurve',
        'target-arrow-color': 'black',
        'text-rotation': 'autorotate',
        'label': 'data(label)',
      }
    },
    {
      selector: '$node > node',
      style: {
        'text-rotation': '-90deg',
        'text-halign': 'left',
        'text-margin-x': -10,
        'text-margin-y': -40,
      }
    },
    {
      selector: '.Badge',
      style: {
        'border-width': 3,
      }
    },
  ],
  minZoom: 0.5,
  maxZoom: 1.5,
  zoomingEnabled: true,
  userZoomingEnabled: false,
  autoungrabify: false,
  autounselectify: true,
});
body {
  font: 14px helvetica neue, helvetica, arial, sans-serif;
}

#cy {
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.2.5/cytoscape.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/dagre/0.8.5/dagre.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/cytoscape-dagre@2.2.2/cytoscape-dagre.min.js"></script>


<div id="cy"></div>
...