应用错误收集

使用cytoscape.js如何自动扩展图形容器的高度？

时间：2019-02-01 07:33:09

标签： cytoscape.js

是否可以根据图形的大小自动扩展图形容器的高度？

我想在网页上显示许多不同大小的图形，而不必指定每个DOM容器的高度。

这有意义吗？

1 个答案:

答案 0 :(得分：0)

答案：

改变关于细胞景观容器的任何东西并不是最好的解决方案。

为您提供的替代选择：

最好使用图形的填充以动态/合适的方式显示图形。最简单的方法是添加节点并运行布局，然后在加载布局时调用cy.fit(cy.elements(), yourPadding)。

在cytoscape中，填充的处理方式与css中的处理方式完全相同，因此您只需计算（可能基于节点数？）图形的适当填充并将其适合视口即可。

此外，您始终可以使用光滑的轻松动画将内容包裹起来，以达到最佳效果。

代码：

当您单击edit the above snippet并在代码段编辑器中运行该代码段时，该代码段有效，由于大小限制，此功能无法正常工作，在不看到编辑器结果的情况下也无法进行调整

var cy = (window.cy = cytoscape({
  container: document.getElementById("cy"),

  boxSelectionEnabled: false,
  autounselectify: true,

  style: [
    {
      selector: "node",
      css: {
        content: "data(id)",
        "text-valign": "bottom",
        "text-halign": "center",
        height: "60px",
        width: "60px",
        "border-color": "black",
        "border-opacity": "1",
        "background-image":
          "https://farm8.staticflickr.com/7272/7633179468_3e19e45a0c_b.jpg"
      }
    },
    {
      selector: "edge",
      css: {
        "target-arrow-shape": "triangle"
      }
    },
    {
      selector: ":selected",
      css: {
        "background-color": "black",
        "line-color": "black",
        "target-arrow-color": "black",
        "source-arrow-color": "black"
      }
    }
  ],

  elements: {
    nodes: [
      { data: { id: "n0" } },
      { data: { id: "n1" } },
      { data: { id: "n2" } },
      { data: { id: "n3" } },
      { data: { id: "n4" } },
      { data: { id: "n5" } },
      { data: { id: "n6" } },
      { data: { id: "n7" } },
      { data: { id: "n8" } },
      { data: { id: "n9" } },
      { data: { id: "n10" } },
      { data: { id: "n11" } },
      { data: { id: "n12" } },
      { data: { id: "n13" } },
      { data: { id: "n14" } },
      { data: { id: "n15" } },
      { data: { id: "n16" } }
    ],
    edges: [
      { data: { source: "n0", target: "n1" } },
      { data: { source: "n1", target: "n2" } },
      { data: { source: "n1", target: "n3" } },
      { data: { source: "n2", target: "n7" } },
      { data: { source: "n2", target: "n11" } },
      { data: { source: "n2", target: "n16" } },
      { data: { source: "n3", target: "n4" } },
      { data: { source: "n3", target: "n16" } },
      { data: { source: "n4", target: "n5" } },
      { data: { source: "n4", target: "n6" } },
      { data: { source: "n6", target: "n8" } },
      { data: { source: "n8", target: "n9" } },
      { data: { source: "n8", target: "n10" } },
      { data: { source: "n11", target: "n12" } },
      { data: { source: "n12", target: "n13" } },
      { data: { source: "n13", target: "n14" } },
      { data: { source: "n13", target: "n15" } }
    ]
  },

  layout: {
    name: "dagre",
    padding: 5
  }
}));
cy.unbind("click");
cy.bind("click", "node", function(event) {                // just for demonstration  purposes here
  var coll = cy.$(event.target).successors();             // get all outgoing nodes
  coll = coll.add(event.target);                          // add their source
  var removed = cy.remove(cy.elements().not(coll));       // remove all other elements
  var len = cy.nodes().length;
  var pad = (len < 10 ? (len < 5 ? (len < 3 ? (len < 2 ? 150 : 100 ) : 75 ) : 50 ) : 25);                                           // custom padding function here
  cy.animate({
  fit: {
    eles: cy.elements(),
    padding: pad
  }
}, {
  duration: 500,
  easing: 'ease-in' 
});
});

body { 
  font: 14px helvetica neue, helvetica, arial, sans-serif;
}

#cy {
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  float: left;
}

<html>
<head>
<meta charset=utf-8 />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.2.17/cytoscape.min.js"></script>
<script src="https://unpkg.com/jquery@3.3.1/dist/jquery.js"></script>
 <script src="https://unpkg.com/dagre@0.7.4/dist/dagre.js"></script>
 <script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-dagre/1.5.0/cytoscape-dagre.js"></script>
</head>
<body>
<div id="cy"></div>
</body>
</html>