Cytoscape.js 3.7.0 text-opacity设置不生效问题求助

你碰到的这个问题，大概率是Cytoscape.js 3.7.0版本里动态设置text-opacity时的渲染bug——当视图缩放时，渲染引擎没能正确保留动态设置的文本透明度属性，导致缩放后被隐藏的文本又重新显示出来。

下面给你两种可行的解决方案，都能避开这个版本的渲染问题：

方案1：通过控制content属性隐藏文本（简单直接） #

比起设置text-opacity，直接清空元素的content来隐藏文本，Cytoscape的渲染逻辑会更稳定，不会因为缩放出现异常：

修改你的节点点击事件代码：

cy.on('click', 'node', function (evt) {
  console.log("======================");
  let toHighlightElements = getToHighlightElements(evt);
  
  // 隐藏所有元素的文本，设置半透明和不可点击
  cy.elements()
    .style({"events":"no", "opacity":"0.2"})
    .nodes().style("content", "") // 清空所有节点的文本内容
    .edges().style("content", ""); // 清空所有边的文本内容

  // 恢复高亮元素的透明度和文本
  toHighlightElements
    .style("opacity", 1)
    // 按节点类型恢复文本
    .filter('node[label = "Person"]').style("content", "data(name)")
    .filter('node[label = "Movie"]').style("content", "data(title)")
    // 恢复边的文本
    .edges().style("content", "data(relationship)");

  evt.target.connectedEdges().style("width", highlightLineWidth);
});

同时，点击空白区域恢复的代码也要对应修改：

cy.on('click', function (event) {
  if (event.target === cy) {
    cy.elements()
      .style("opacity", 1)
      .style("events", "yes")
      // 恢复所有节点和边的文本
      .filter('node[label = "Person"]').style("content", "data(name)")
      .filter('node[label = "Movie"]').style("content", "data(title)")
      .edges().style("content", "data(relationship)");
    console.log('tap on background');
  } else {
    console.log('tap on some element');
  }
});

方案2：用CSS类管理文本状态（更推荐，可扩展性更强） #

定义专门的CSS类来控制文本显示/隐藏，利用Cytoscape的类选择器优先级，能有效避免动态样式的渲染异常：

首先在你的style配置数组里添加两个类：

style: [
  // 保留你原有的节点、边样式...
  {
    selector: '.hidden-text',
    css: {
      'text-opacity': 0
    }
  },
  {
    selector: '.visible-text',
    css: {
      'text-opacity': 1
    }
  }
]

然后修改节点点击事件的代码：

cy.on('click', 'node', function (evt) {
  console.log("======================");
  let toHighlightElements = getToHighlightElements(evt);
  
  // 给所有元素添加隐藏文本类，设置半透明和不可点击
  cy.elements()
    .addClass('hidden-text')
    .removeClass('visible-text')
    .style({"events":"no", "opacity":"0.2"});

  // 给高亮元素移除隐藏类，添加显示类，恢复透明度
  toHighlightElements
    .removeClass('hidden-text')
    .addClass('visible-text')
    .style("opacity", 1);

  evt.target.connectedEdges().style("width", highlightLineWidth);
});

点击空白区域恢复的代码也要同步调整：

cy.on('click', function (event) {
  if (event.target === cy) {
    cy.elements()
      .removeClass('hidden-text')
      .addClass('visible-text')
      .style("opacity", 1)
      .style("events", "yes");
    console.log('tap on background');
  } else {
    console.log('tap on some element');
  }
});

另外提个小细节：你原来的代码里，toHighlightElements只恢复了opacity，没恢复text-opacity——就算text-opacity正常工作，高亮节点的文本也会被隐藏，上面的两种方案已经把这个问题一起解决了。

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