Question

我正在尝试创建

中显示的图表

https://gist.github.com/maxkfranz/eb861f83fb741628342f

所以基本上，我有一个引导容器和

<div class="container">

    /*Other divs here*/

    <div id="cy" style=" height: 50%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-color: #FAEDEF;"></div>

                <div id="cy2" style=" height: 50%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 50%;
  background-color: #EDF1FA;
  border-top: 1px solid #ccc;"></div>
</div>

这是我的头元素

  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <script src="http://code.highcharts.com/highcharts.js"></script>
  <script src="http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cytoscape.min.js"></script>

这里是javascript

$(document).ready(function() {
var elesJson = {
  nodes: [
    { data: { id: 'a', foo: 3, bar: 5, baz: 7 } },
    { data: { id: 'b', foo: 7, bar: 1, baz: 3 } },
    { data: { id: 'c', foo: 2, bar: 7, baz: 6 } },
    { data: { id: 'd', foo: 9, bar: 5, baz: 2 } },
    { data: { id: 'e', foo: 2, bar: 4, baz: 5 } }
  ], 

  edges: [
    { data: { id: 'ae', weight: 1, source: 'a', target: 'e' } },
    { data: { id: 'ab', weight: 3, source: 'a', target: 'b' } },
    { data: { id: 'be', weight: 4, source: 'b', target: 'e' } },
    { data: { id: 'bc', weight: 5, source: 'b', target: 'c' } },
    { data: { id: 'ce', weight: 6, source: 'c', target: 'e' } },
    { data: { id: 'cd', weight: 2, source: 'c', target: 'd' } },
    { data: { id: 'de', weight: 7, source: 'd', target: 'e' } }
  ]
};

$('#cy').cytoscape({
  style: cytoscape.stylesheet()
    .selector('node')
      .css({
        'background-color': '#B3767E',
        'width': 'mapData(baz, 0, 10, 10, 40)',
        'height': 'mapData(baz, 0, 10, 10, 40)',
        'content': 'data(id)'
      })
    .selector('edge')
      .css({
        'line-color': '#F2B1BA',
        'target-arrow-color': '#F2B1BA',
        'width': 2,
        'target-arrow-shape': 'circle',
        'opacity': 0.8
      })
    .selector(':selected')
      .css({
        'background-color': 'black',
        'line-color': 'black',
        'target-arrow-color': 'black',
        'source-arrow-color': 'black',
        'opacity': 1
      })
    .selector('.faded')
      .css({
        'opacity': 0.25,
        'text-opacity': 0
      }),

  elements: elesJson,

  layout: {
    name: 'circle',
    padding: 10
  },

  ready: function(){

  }
});

$('#cy2').cytoscape({
  style: cytoscape.stylesheet()
    .selector('node')
      .css({
        'background-color': '#6272A3',
        'shape': 'rectangle',
        'width': 'mapData(foo, 0, 10, 10, 30)',
        'height': 'mapData(bar, 0, 10, 10, 50)',
        'content': 'data(id)'
      })
    .selector('edge')
      .css({
        'width': 'mapData(weight, 0, 10, 3, 9)',
        'line-color': '#B1C1F2',
        'target-arrow-color': '#B1C1F2',
        'target-arrow-shape': 'triangle',
        'opacity': 0.8
      })
    .selector(':selected')
      .css({
        'background-color': 'black',
        'line-color': 'black',
        'target-arrow-color': 'black',
        'source-arrow-color': 'black',
        'opacity': 1
      }),

  elements: elesJson,

  layout: {
    name: 'breadthfirst',
    directed: true,
    padding: 10
  },

  ready: function(){
    // ready 2
  }
});
  });

问题是，当我打开页面时，两个div cy和cy2会覆盖整个页面！意思是所有其他div都被覆盖了。

这是否与posiiton:absolute有关？我试图将它改为亲戚，但如果我这样做，那么cy和cy2就会显得很细！

我是css的新手，我不知道如何配置样式以便图表正确显示。

非常感谢任何帮助。

Answer 1

问题在于您使用的是height: 50%，但没有任何内容可以达到50％。当您将div设置为position: absolute时，他们会获得50％的窗口高度。如果你可以为它们设置一个固定的高度，你应该全部设置。

 <div id="cy" style="height: 400px;
   width: 100%;
   background-color: #FAEDEF;"></div>

 <div id="cy2" style=" height: 400px;
   background-color: #EDF1FA;
   border-top: 1px solid #ccc;"></div>

Javascript：无法正确对齐div

1 个答案: