Javascript cytoscape.js图形的条件样式

我想根据全局Javascript变量更改图形的样式。例如，假设我的边获得了

name

和

price

属性，我希望根据全局

label\u类型

变量使边的标签不同：

let lable_type = 'I_want_name_labels'
switch(lable_type) {
  case 'I_want_name_labels':
    cy.style().selector('edge').style({'label': 'data(name)'});
    break;
  case 'I_want_price_labels':
    cy.style().selector('edge').style({'label': 'data(price)'});
    break;
}

上面的代码根本不起任何作用（没有显示标签），我真的不明白为什么。 “我的边”具有以下结构：

{
  "data": {
    "id": "node_node2",
    "source": "node1",
    "target": "node2",
    "directed": true,
    "name": "Baltazar",
    "price": 1095.73
  }
}

---

注意：我尝试使用

cy.filter（'edge'）.style（{'label'：'data（name）}）

，但是

数据

似乎无法通过这种方式访问，我收到了以下警告：

The style property `label: data(name)` is invalid

---

---

那么，如何使用cytoscape.js获得条件样式呢？我错过了什么

以下是您要查找的线路：

// .data() gets you all properties of the target element, .id() for example directly the id of the element
targetElement.style('label', targetElement.data('faveColor'));

下面是一个关于如何初始化然后更改节点/边标签的工作演示：

var cy=（window.cy=cytoscape({
容器：document.getElementById（“cy”），
boxSelectionEnabled:false，
自动取消选择：true，
风格：[{
选择器：“节点”，
css:{
“标签”：“数据（id）”，
“文本有效”：“中心”，
“文本halign”：“中心”，
“高度”：“60px”，
“宽度”：“100px”，
“形状”：“矩形”，
“背景色”：“数据（faveColor）”
}
},
{
选择器：“边缘”，
css:{
“曲线样式”：“贝塞尔”，
“控制点步长”：40，
“目标箭头形状”：“三角形”
}
}
],
要素：{
节点：[{
数据：{
id:“顶部”，
faveColor:#2763c4“，
想要“身份证”
}
},
{
数据：{
id:“是”，
faveColor:#37a32d“，
想要“身份证”
}
},
{
数据：{
id:“否”，
faveColor:#2763c4“，
想要“身份证”
}
},
{
数据：{
id:“第三”，
faveColor:#2763c4“，
想要：“颜色”
}
},
{
数据：{
id:“第四”，
faveColor:#56a9f7“，
想要：“颜色”
}
}
],
边缘：[{
数据：{
资料来源：“顶部”，
目标：“是”
}
},
{
数据：{
资料来源：“顶部”，
目标：“不”
}
},
{
数据：{
资料来源：“否”，
目标：“第三”
}
},
{
数据：{
资料来源：“第三”，
目标：“第四”
}
},
{
数据：{
资料来源：“第四”，
目标：“第三”
}
}
]
},
布局：{
姓名：“达格雷”
}
}));
cy.bind（'click'，'node，edge'，函数（事件）{
cy.nodes（）.每个（函数（ele，i，eles）{
元素样式（'label'，（元素数据（'wants'）='id'）？元素数据（'id'）：元素数据（'faveColor'））；
});
});
正文{
字体：14px helvetica neue，helvetica，arial，无衬线；
}
#赛义德{
身高：85%；
宽度：100%；
浮动：对；
位置：绝对位置；
}

大家好，有一个简单的问题：您是想用标签初始化节点/边，还是想在以后更改它们？到目前为止，我没有用任何标签初始化边，但我可以用任何数据值进行初始化，然后再进行更改。如果在初始化时这样做容易得多，您为什么要在之后进行此操作？嗯，我想在应用样式后对边进行返工，但我意识到在返工后应用样式确实更明智。它工作的很好，谢谢你的线索！看起来不错，但如何一次对所有边（或节点）执行此操作？这就是为什么我使用cy.filter和cy.selector的原因。我为您添加了过滤功能，如果您需要帮助，只需添加另一条注释。