Polymer 如何在高分子元件中使用cytoscape?
这是我的聚合物元素:Polymer 如何在高分子元件中使用cytoscape?,polymer,cytoscape.js,cytoscape,Polymer,Cytoscape.js,Cytoscape,这是我的聚合物元素: <link rel="import" href="../polymer/polymer.html"> <script src="bower_components/cytoscape/dist/cytoscape.js"></script> <dom-module id="dependency-graph"> <template> <style>
<link rel="import" href="../polymer/polymer.html">
<script src="bower_components/cytoscape/dist/cytoscape.js"></script>
<dom-module id="dependency-graph">
<template>
<style>
#surface {
width: 200px;
height: 200px;
}
</style>
<div id="surface"></div>
</template>
<script>
Polymer({
is: 'dependency-graph',
ready: function () {
var surface = this.$.surface;
var cy = cytoscape({
container: surface
});
...
因为style.getPropertyValue
返回”
。如果我使用document.body
作为容器,它将返回一个数字,cytoscape将正常工作。我做错了什么?我该如何修复它
我找到了一篇关于类似问题的文章,但我没有得到它(或者它不起作用?):请确保在DOM中已经存在的元素上调用Cytoscape,并仅在加载了
DOMContentLoaded
后初始化。如果window.getComputedStyle()
不起作用,那么至少有一个要求没有得到满足。我将代码移到了附加的:函数(){
中,现在它可以毫无问题地工作了。Thx@maxkfranz支持这个想法
return ( _p.sizeCache = _p.sizeCache || ( container ? (function(){
var rect = container.getBoundingClientRect();
var style = window.getComputedStyle( container );
var val = function( name ){ return parseFloat( style.getPropertyValue( name ) ); };
return {
width: rect.width - val('padding-left') - val('padding-right') - val('border-left-width') - val('border-right-width'),
height: rect.height - val('padding-top') - val('padding-bottom') - val('border-top-width') - val('border-bottom-width')
};