圖表不會在Cystoscape.js的div中使用「position：relative」時顯示

我希望將圖表限制爲'bordered'div。如果我替換位置：絕對位置：容器div的相對位置，圖形根本不顯示/顯示。圖表不會在Cystoscape.js的div中使用「position：relative」時顯示

如果有人可以說出一些光芒？

<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>

我希望將div圖中的圖形限制在cy div上。

以下是我已經嘗試的事情：

嵌套的div
CY之間的位置關係，以及父母的div（當使用嵌套的div）。
甚至試圖引導電網圍
使用了最新的Cytoscape.js
甚至試圖改變/庫玩弄絕對定位標籤與。

我不認爲它會很複雜，但不知何故我無法破解它。

我在前面提到的問題： 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

來源

2016-12-16 JALO - JusAnotherLivngOrganism

我遇到了什麼，我相信這是一個類似的問題。我加了一個包裝div產生圍繞position: relative CY格邊框：如果您使用position: relative和相對指定尺寸

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

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

</div>

來源

2016-12-16 15:52:29 desc

，他們相對於包含塊，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

來源

2016-12-19 21:46:25 maxkfranz

我曾嘗試制定機構的寬度和高度爲100％，但這並沒有幫助。如果我使用cy div的相對位置，它根本不呈現圖形。 –

事實證明，儘管將身高和體寬提爲100％，但如果以％表示高度和寬度，圖形將不會呈現。但是，它會在像素中提及高度和寬度（或僅高度）時呈現。 –

您必須在頁面上執行其他操作時遇到其他問題。我有幾個演示程序可以很好地工作。 – maxkfranz

圖表不會在Cystoscape.js的div中使用「position：relative」時顯示

回答

相關問題