1

我正在使用带有 dagre 布局的 Cytoscape.js 来可视化树状层次结构。我有几个关于布局的问题。您可以在此处检查实际和预期快照并检查可运行的示例。

  1. 每个等级/层次结构级别/中的节点中心对齐。可以根据宽度最大的节点左对齐吗？
  2. 同一等级的相邻节点之间的间隔对于节点来说是相同的，无论它们是否在复合节点中。我们可以为复合节点中的节点指定更小的间隔吗？我在复合节点中指定了页眉和页脚 svg，并且可以有来自同一等级的多个节点。如果我为所有节点设置较小的间隔，那么复合节点将重叠。我想避免复合节点重叠，同时在复合节点中有更小的间隔。
  3. 我们可以为同级别的父节点指定顺序吗？例如，我希望 node5 和 node7 以及它们的复合节点位于顶部？我不确定 dagre 布局是否支持这一点。至于 klay 和 elk 布局，它们的布局似乎没有 dagre 好。

我很好奇上述是否可以通过特定布局实现或必须手动处理。

您可以在上面找到一个可运行示例的链接。

    window.addEventListener("DOMContentLoaded", function() {
    var cy = window.cy = cytoscape({
      container: document.getElementById('cy'),
    
      boxSelectionEnabled: false,
      autounselectify: true,
    
      layout: {
        name: 'dagre',
        rankDir: 'LR',
        fit: false,
      },
    
      style: [
        {
          selector: 'node',
          style: {
            //'content': 'data(id)',
            'label': function(arg) {
              var labelRighPadding = arg.hasClass(ICON_NODE) ? '\u0020\u0020\u0020\u200b' : '';
              return arg.data().id + labelRighPadding; 
              //return arg.data().id + '\uf022';
            },
            //'text-wrap': 'wrap',
            //'font-family': 'FontAwesome, helvetica neue Cantarell',
            'text-opacity': 0.5,
            'text-valign': 'center',
            'text-halign': 'center',
            'background-color': 'white',
            'border-width': 1,
            'border-color': 'black',
            //'text-margin-x': -10,
            'width': 'label',
            // 'width': function(e) {
            //   return e.boundingBox().w + 20;
            // },
            'height':'label',
            'shape':'round-rectangle',
            'padding': '5px',  
          }
        },
        {
          selector: 'node.' + ICON_NODE,
          css: {
            'background-image': 'url(note.png)',
            'background-width': '16px',
            'background-height': '16px',
            'background-position-x': '100%',
            'background-opacity': 0,
           // 'padding-relative-to': 'min'
          }
        },
        {
          selector: 'node.parent_title',
          css: {
            'border-color': 'red',
        
          }
        },
        {
          selector: ':parent',
          css: {
            // 'text-valign': 'center',
            // 'text-halign': 'center',
            //'min-height': "90px",
            'background-image': ['url(host.svg)', addText(), drawLine(), addText()],
            'background-width': ['16', 'auto', '100%', 'auto'],
            'background-height': ['16', 'auto', '1px', 'auto'],
            'background-position-y': ['10%', '10%', '70%', '90%'],
            'background-position-x': ['10', '26', '0', '10'],
            'label': '',
            'background-color': 'white',
            'border-width': 1,
            'border-color': 'black',
            //'padding': '10px',
            'padding': '40px' //or padding 40 with no height
          }
        },
        {
          selector: 'edge',
          style: {
            "curve-style": "unbundled-bezier",
            'width': 1,
            'target-arrow-shape': 'triangle',
            'target-arrow-color': 'black',
            'line-color': 'black',
          }
        },
        {
          selector: 'edge.danger',
          style: {
            'line-color': 'red',
            'target-arrow-color': 'red',
          }
        }
      ],
    
      elements: {
        nodes: [
        
        ],
        edges: [
        ]
      },
    });
    });
4

0 回答 0