可以将节点的宽度设置为
label我现在确实通过代码片段看到此功能已被弃用......？它是否已被新的现代方法所取代......？
我还想知道是否可以根据背景 svg 图像确定节点的大小，以及如果可能的话，可以将其记录在哪里。
const cy = cytoscape({
container: document.getElementById("chart"),
elements: [
{
data: { id: "a", custom: "\uf3c5" }
}
],
style: [
{
selector: "node",
style: {
width: "label",
"background-color": "#666",
"text-valign": "center",
"text-halign": "center",
shape: "round-rectangle",
label: "hello node width based on me"
}
}
],
layout: {
name: "grid",
rows: 1
}
});.chart {
color: red;
width: 1000px;
height: 400px;
background-color: lightgrey;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.28.1/cytoscape.min.js"></script>
<div class="chart" id="chart">
</div>您正在寻找的文档不再存在。自 2020 年 9 月 14 日起，已弃用使用
width: 'label',正如您所见here，cytoscape.js 的主要贡献者已弃用此功能。
有一些方法仍然可以获得类似的结果，如this StackOverflow 答案所示：
{
selector: 'node',
style: {
'width': (node) => { node.data('label') * magicNumber; },
'height': (node) => { node.data('label') * magicNumber; },
}
}
下面，我添加了一个带有工作解决方案的 MRE：
const cy = cytoscape({
container: document.getElementById("chart"),
elements: [{
data: {
id: "a",
custom: "\uf3c5",
name: "hello node width based on me"
}
}],
style: [{
selector: "node",
style: {
"width": (node) => {
const ctx = document.createElement('canvas').getContext("2d");
const fStyle = node.pstyle('font-style').strValue;
const size = node.pstyle('font-size').pfValue + 'px';
const family = node.pstyle('font-family').strValue;
const weight = node.pstyle('font-weight').strValue;
ctx.font = fStyle + ' ' + weight + ' ' + size + ' ' + family;
return ctx.measureText(node.data('name')).width;
},
"background-color": "#666",
"text-valign": "center",
"text-halign": "center",
"shape": "round-rectangle",
"label": "data(name)",
}
}],
layout: {
name: "grid",
rows: 1,
}
});
cy.unbind('layoutready');
cy.bind('layoutready', function() {
cy.fit();
cy.center();
});body {
font-family: helvetica;
font-size: 14px;
}
#chart {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 999;
}
h1 {
opacity: 0.5;
font-size: 1em;
}<!DOCTYPE>
<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<script src="https://unpkg.com/[email protected]/dist/cytoscape.min.js">
</script>
</head>
<body>
<div class="chart" id="chart"></div>
</body>
</html>