在 Cystoscape.js 中的 div 中使用 "position:relative" 时图表不显示

Question

我希望将图表限制在 'bordered' div。如果我将容器 div 的 position:absolute 替换为 position:relative，则图表根本不会 render/display。

如果有人可以阐明一些问题？

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cytoscape.min.js"></script>
<script>
$(function(){ // on dom ready

$('#cy').cytoscape({
  layout: {
    name: 'cose',
    padding: 10,
    randomize: true
 },

style: cytoscape.stylesheet()
.selector('node')
  .css({
    'shape': 'data(faveShape)',
    'width': 'mapData(weight, 40, 80, 20, 60)',
    'content': 'data(name)',
    'text-valign': 'center',
    'text-outline-width': 2,
    'text-outline-color': 'data(faveColor)',
    'background-color': 'data(faveColor)',
    'color': '#fff'
  })
.selector(':selected')
  .css({
    'border-width': 3,
    'border-color': '#333'
  })
.selector('edge')
  .css({
    'curve-style': 'bezier',
    'opacity': 0.666,
    'width': 'mapData(strength, 70, 100, 2, 6)',
    'target-arrow-shape': 'triangle',
    'source-arrow-shape': 'circle',
    'line-color': 'data(faveColor)',
    'source-arrow-color': 'data(faveColor)',
    'target-arrow-color': 'data(faveColor)'
  })
.selector('edge.questionable')
  .css({
    'line-style': 'dotted',
    'target-arrow-shape': 'diamond'
  })
.selector('.faded')
  .css({
    'opacity': 0.25,
    'text-opacity': 0
  }),

elements: {
nodes: [
  { data: { id: 'j', name: 'Jerry', weight: 65, faveColor: '#6FB1FC', faveShape: 'triangle' } },
  { data: { id: 'e', name: 'Elaine', weight: 45, faveColor: '#EDA1ED', faveShape: 'ellipse' } },
  { data: { id: 'k', name: 'Kramer', weight: 75, faveColor: '#86B342', faveShape: 'octagon' } },
  { data: { id: 'g', name: 'George', weight: 70, faveColor: '#F5A45D', faveShape: 'rectangle' } }
],
edges: [
  { data: { source: 'j', target: 'e', faveColor: '#6FB1FC', strength: 90 } },
  { data: { source: 'j', target: 'k', faveColor: '#6FB1FC', strength: 70 } },
  { data: { source: 'j', target: 'g', faveColor: '#6FB1FC', strength: 80 } },

  { data: { source: 'e', target: 'j', faveColor: '#EDA1ED', strength: 95 } },
  { data: { source: 'e', target: 'k', faveColor: '#EDA1ED', strength: 60 }, classes: 'questionable' },

  { data: { source: 'k', target: 'j', faveColor: '#86B342', strength: 100 } },
  { data: { source: 'k', target: 'e', faveColor: '#86B342', strength: 100 } },
  { data: { source: 'k', target: 'g', faveColor: '#86B342', strength: 100 } },

  { data: { source: 'g', target: 'j', faveColor: '#F5A45D', strength: 90 } }
]
},
ready: function(){
window.cy = this;

// giddy up
}
});

}); // on dom ready
</script>

<style>
body { 
font: 14px helvetica neue, helvetica, arial, sans-serif;
}

#cy {
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
</style>  
<body>
  <div id="cy"></div>
</body>

我希望将图形限制在 cy div 中，并在 div 周围加上边框。

以下是我尝试过的事情：

嵌套 divs
cy 和父 divs 的相对定位（当使用嵌套 divs 时）。
甚至尝试限制在 bootstrap 个网格中
使用最新的Cytoscape.js
甚至尝试 changing/playing 在库中使用绝对定位标签。

我没想到会很复杂，但不知为何我无法破解它。

我在以下位置提到了之前的问题： http://cytoscape-cvs.narkive.com/1O4DLa9g/cytoscape-cytoscape-js-e85d5c-use-position-relative-on-canvas-parent-containe https://github.com/cytoscape/cytoscape.js/commit/e85d5cad1ca87839f075622f642903828cf6f78e

Answer 1

我运行我认为是一个类似的问题。我添加了一个包装器 div 以在 position: relative cy div:

周围生成一个边框

<div id="cyWrapper" style="position: relative; border: 2px solid #212523">

    <div id='cy'></div>

</div>

Answer 2

如果您使用 position: relative 并相对指定维度，它们是相对于包含块 body 的。

但是body没有明确定义的高度。因为默认的用户代理样式表可能有 body { display: block; }，body 将是其父级的宽度——文档。

但是，在默认样式表中 body 的高度未定义，因此与任何块元素一样，它采用其子元素总和的高度。但是其中一个子元素 #cy 是根据其父元素的高度定义的。我们有一个循环依赖，所以不能使用为 #cy 指定的百分比高度。所以它以零高度结束，这是空块元素的默认高度。

确保指定 Cytoscape div 的大小，使其非零，并且应该可以正常工作。尝试使用 height: 100vh; width: 100vw; 之类的视口单位或设置 body { height: 100%; width: 100% }，以便百分比值在 #cy.

上有意义

详见MDN：https://developer.mozilla.org/en-US/docs/Web/CSS/height

Answer 3

一个相当烦人的问题：难以在 Cytoscape.js <div id='cy'></div> 元素周围放置额外的 <div> 元素。

无需进一步调查，似乎 Cytoscape.js 代码自动格式化 div（z-index？），这里提到，

https://github.com/cytoscape/cytoscape.js/issues/402

和/或 DOM 的其他方面（在此处搜索“DOM”：https://js.cytoscape.org）。

接受的答案提供了解决方案；这是我使用它的方式。

<!DOCTYPE html>
<head>
  <!--
    Notes:
      1. I couldn't use % with #cy; use rem, or viewport { vh | vw } units.
      2. I can now place <div> elements above / below the #cy div.
  -->
  <style>
    #cy {
      width: 40vw;
      height: 40vh;
      // position: relative;
      border: 1px solid #949494;
      overflow: hidden;
    }
    #cyWrapper {
      // ...
    }
    #controls {
      // ...
    }
  </style>

  <script src='https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.18.2/cytoscape.min.js'></script>
</head>

<body>
  <div><p>apple</p></div>

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

  <script>
  fetch('ontology2.cyjs').then(res => res.json())
    .then(d => {
        setup(d);
    })
    .catch(function(error) {
        console.log('Error: failed promise')
        if (error) throw error;
    });

  function setup(myData) {
    var cy = cytoscape({
      container: document.getElementById('cy'),
      // [ ... snip ... ]
  };
  </script>

  <div id=#controls>
    <p>banana</p>
  </div>
</body>
</html>

“apple”、Cytoscape.js 图和“carrot”各自位于单独的 <div 个元素中。

参考资料

确认“问题：”https://github.com/cytoscape/cytoscape.js/issues/402

在 Cystoscape.js 中的 div 中使用 "position:relative" 时图表不显示

Chart doesn't display on using "position:relative" in the div in Cystoscape.js

javascript

cytoscape.js