gpt4 book ai didi

cytoscape.js - Cytoscape js单击节点时如何获取所有边(文本标签)

转载 作者:行者123 更新时间:2023-12-05 03:55:48 25 4
gpt4 key购买 nike

我知道我可以使用 node.connectedEdges() 返回连接到该节点的边的对象。如何访问所有边缘的数据字段。我希望能够单击一个节点并在列表中包含连接的边标签(文本)。

此外,当您单击一个节点时,您如何访问该节点的元数据(节点 JSON 对象中的其他属性)。

谢谢

最佳答案

好吧,节点/边缘元数据中的所有内容都可以使用 .data() 访问方法。这是一项核心功能,我建议您查看 docs ,因为这是一项相当简单的任务。您所要做的就是调用 .connectedEdges()方法并相应地映射结果对象(使用 .data()):

var cy = window.cy = cytoscape({
container: document.getElementById('cy'),

style: [{
selector: 'node',
css: {
'content': 'data(id)',
'text-valign': 'center',
'text-halign': 'center',
'height': '60px',
'width': '60px',
'border-color': 'black',
'border-opacity': '1',
'border-width': '10px'
}
},
{
selector: 'edge',
css: {
'target-arrow-shape': 'triangle'
}
},
{
selector: ':selected',
css: {
'background-color': 'black',
'line-color': 'black',
'target-arrow-color': 'black',
'source-arrow-color': 'black'
}
}
],

elements: {
nodes: [{
data: {
id: 'n0'
}
},
{
data: {
id: 'n1'
}
},
{
data: {
id: 'n2'
}
},
{
data: {
id: 'n3'
}
},
{
data: {
id: 'n4'
}
},
{
data: {
id: 'n5'
}
},
{
data: {
id: 'n6'
}
},
{
data: {
id: 'n7'
}
},
{
data: {
id: 'n8'
}
},
{
data: {
id: 'n9'
}
},
{
data: {
id: 'n10'
}
},
{
data: {
id: 'n11'
}
},
{
data: {
id: 'n12'
}
},
{
data: {
id: 'n13'
}
},
{
data: {
id: 'n14'
}
},
{
data: {
id: 'n15'
}
},
{
data: {
id: 'n16'
}
}
],
edges: [{
data: {
source: 'n0',
target: 'n1'
}
},
{
data: {
source: 'n1',
target: 'n2'
}
},
{
data: {
source: 'n1',
target: 'n3'
}
},
{
data: {
source: 'n2',
target: 'n7'
}
},
{
data: {
source: 'n2',
target: 'n11'
}
},
{
data: {
source: 'n2',
target: 'n16'
}
},
{
data: {
source: 'n3',
target: 'n4'
}
},
{
data: {
source: 'n3',
target: 'n16'
}
},
{
data: {
source: 'n4',
target: 'n5'
}
},
{
data: {
source: 'n4',
target: 'n6'
}
},
{
data: {
source: 'n6',
target: 'n8'
}
},
{
data: {
source: 'n8',
target: 'n9'
}
},
{
data: {
source: 'n8',
target: 'n10'
}
},
{
data: {
source: 'n11',
target: 'n12'
}
},
{
data: {
source: 'n12',
target: 'n13'
}
},
{
data: {
source: 'n13',
target: 'n14'
}
},
{
data: {
source: 'n13',
target: 'n15'
}
},
]
},

layout: {
name: 'dagre',
padding: 5
}
});


cy.ready(function() {
cy.unbind('click')
cy.bind('click', 'node', function(event) {
let edges = event.target.connectedEdges().map(edge => edge.data().id)
console.log(edges)
})
})
body {
font: 14px helvetica neue, helvetica, arial, sans-serif;
}

#cy {
height: 100%;
width: 100%;
position: absolute;
left: 0;
top: 0;
float: left;
}
<html>

<head>
<script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
<script src="https://unpkg.com/dagre@0.7.4/dist/dagre.js"></script>
<script src="https://cdn.jsdelivr.net/npm/cytoscape-dagre@2.1.0/cytoscape-dagre.min.js"></script>
</head>

<body>
<div id="cy"></div>
</body>

</html>

您只需要在边缘添加一些额外的数据,然后写入该键而不是 id:edge.data().someKey

关于cytoscape.js - Cytoscape js单击节点时如何获取所有边(文本标签),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59878173/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com