CytoscapeJS背景色需点击节点才显示的原因及即时显示方案

为什么背景色需要点击节点才显示？ #

你遇到的问题根源在于把节点样式直接写在了elements数组的节点对象里的style属性中。Cytoscape JS 默认不会自动渲染这种内联样式，只有当节点触发重绘事件（比如点击、选中操作）时，引擎才会读取并应用这些样式——这是因为内联样式的渲染优先级和初始化时的解析逻辑导致的，初始化阶段并没有主动去处理这部分样式。

两种解决方法，让背景色立即显示 #

方法1：使用全局样式配置（推荐）

把节点的样式规则移到Cytoscape初始化配置的style字段里，这是Cytoscape官方推荐的样式管理方式，能确保初始化时就正确渲染所有样式：

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://pagecdn.io/lib/cytoscape/3.10.2/cytoscape.min.js"></script>
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title></title>
  <style media="screen">
    #cy {
      width: 100%;
      height: 100vh; /* 改成100vh确保容器占满视口，避免因父元素高度缺失看不到节点 */
    }
  </style>
</head>
<body>
  <div id="cy"></div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
  var cy = cytoscape({
    container: document.getElementById('cy'),
    elements: {
      nodes: [
        { data: { id: 'n1'} },
        { data: { id: 'n2'} }
      ],
      edges: [
        { data: { source: 'n1', target: 'n2' } }
      ]
    },
    // 全局样式配置，初始化时会自动应用
    style: [
      {
        selector: '#n1',
        style: {
          'width': 80,
          'height': 80,
          'pie-size': '80%',
          'pie-1-background-color': '#E8747C',
          'pie-1-background-size': '75%',
          'pie-2-background-color': '#74CBE8',
          'pie-2-background-size': '25%'
        }
      },
      {
        selector: '#n2',
        style: {
          'width': 80,
          'height': 80,
          'background-color': '#E8747C'
        }
      }
    ]
  });
})
</script>

方法2：手动触发重绘（适合必须用内联样式的场景）

如果你因为特殊需求必须保留内联样式的写法，可以在初始化完成后，手动调用cy.nodes().redraw()强制所有节点重绘，这样就能立即显示样式：

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://pagecdn.io/lib/cytoscape/3.10.2/cytoscape.min.js"></script>
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title></title>
  <style media="screen">
    #cy {
      width: 100%;
      height: 100vh;
    }
  </style>
</head>
<body>
  <div id="cy"></div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
  var cy = cytoscape({
    container: document.getElementById('cy'),
    elements: {
      nodes: [
        { data: { id: 'n1'}, style: {
          'width': 80,
          'height': 80,
          'pie-size': '80%',
          'pie-1-background-color': '#E8747C',
          'pie-1-background-size': '75%',
          'pie-2-background-color': '#74CBE8',
          'pie-2-background-size': '25%'}
        },
        { data: { id: 'n2'}, style: {'width': 80, 'height': 80, 'background-color': '#E8747C'} }
      ],
      edges: [
        { data: { source: 'n1', target: 'n2' } }
      ]
    }
  });

  // 初始化完成后强制重绘所有节点
  cy.nodes().redraw();
})
</script>

额外小提示 #

我给代码里的节点加了width和height样式，默认节点尺寸很小，加上后能更清晰看到效果；同时把#cy的高度改成100vh，避免因为父元素没有设置高度导致容器塌陷，看不到节点。

内容的提问来源于stack exchange，提问作者Peter Pisher