Ich habe ein Diagramm (source credit) wo ich einen (oder mehrere) Knoten und seine verbundenen Kanten auswählen kann (die Kanten werden blau, wenn ich auswählen ein Knoten). Nun, wie muss ich vorgehen, wenn ich einen neuen Graphen zeigen wollte, der aus den ausgewählten Knoten und Kanten besteht, wenn ich mit der rechten Maustaste auf einen der bereits ausgewählten Knoten klicke?cytoscape.js zeigen ausgewählte Knoten und Kanten in einem neuen Diagramm mit der rechten Maustaste
Hier ist, was ich bisher getan habe:
cytoscape.js von here
index.html:
<!doctype html>
<!-- source: http://blog.js.cytoscape.org/public/demos/getting-started/index-layout.html -->
<html>
<head>
<meta charset="utf-8"></meta>
<title>Tutorial 1: Getting Started</title>
<script src="cytoscape.js"></script>
</head>
<style>
#cy {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
}
</style>
<body>
<div id="cy"></div>
<script>
var cy = cytoscape({
container: document.getElementById('cy'),
elements: [
// nodes
{ data: { id: 'a' } },
{ data: { id: 'b' } },
{ data: { id: 'c' } },
{ data: { id: 'd' } },
{ data: { id: 'e' } },
{ data: { id: 'f' } },
// edges
{
data: {
id: 'ab',
source: 'a',
target: 'b'
}
},
{
data: {
id: 'cd',
source: 'c',
target: 'd'
}
},
{
data: {
id: 'ef',
source: 'e',
target: 'f'
}
},
{
data: {
id: 'ac',
source: 'a',
target: 'c'
}
},
{
data: {
id: 'be',
source: 'b',
target: 'e'
}
}
],
style: [
{
selector: 'node',
style: {
shape: 'vee',
'background-color': '#A60059',
label: 'data(id)'
}
}],
layout: {
name: 'grid'
}
});
cy.on('select', 'node', function(evt){
evt.cyTarget.connectedEdges().animate({
style: { lineColor: 'blue' }
});
});
/* cy.on('cxttap', 'node', function(evt) {
evt.cyTarget.connectedEdges().animate({
style: {lineColor: 'green'}
});
});*/
</script>
</body>
Die cy.on('cxttap','node', function()...) kommentiert zeigt die Ereignisbehandlung, die Kanten in grüne Farbe zu drehen, wenn rechts- Klicken Sie auf einen Knoten. Aber wie bekomme ich alle zuvor ausgewählten Knoten und Kanten in einen neuen Graphen (und lade ihn ein)? Ich habe this Post, gesehen, die sagt, dass man etw wie verwenden hat:
cy.$(':selected').jsons()
Aber ehrlich gesagt, ich bin ein bisschen, wie das zu tun verloren. Jede Hilfe wäre sehr willkommen.
EDIT:
OK, also mit dem Hauch von maxkfranz, konnte ich die ausgewählten Knoten (und die Kanten) an einem anderen Graphen cy2 erhalten. Wenn ich also mehrere Knoten auswähle ("Strg + Ziehen-Auswahl-über-Knoten") und dann mit der rechten Maustaste auf einen der ausgewählten Knoten klicke, werden diese in einem anderen Diagramm in ein neues Diagramm gezeichnet. Hier ist meine aktualisierte Code (Daten jetzt wird von einer externen json-Datei geladen):
testdata.json:
{ "nodes" : [
{"data": {"id": "a"}},
{"data": {"id": "b"}},
{"data": {"id": "c"}},
{"data": {"id": "d"}},
{"data": {"id": "e"}},
{"data": {"id": "f"}}
],
"edges" : [
{
"data": {
"id": "ab",
"source": "a",
"target": "b"
}
},
{
"data": {
"id": "cd",
"source": "c",
"target": "d"
}
},
{
"data": {
"id": "ef",
"source": "e",
"target": "f"
}
},
{
"data": {
"id": "ac",
"source": "a",
"target": "c"
}
},
{
"data": {
"id": "be",
"source": "b",
"target": "e"
}
}
]
}
index.html:
<!doctype html>
<!-- source: http://blog.js.cytoscape.org/public/demos/getting-started/index-layout.html -->
<html>
<head>
<meta charset="utf-8"></meta>
<title>Tutorial 1: Getting Started</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="cytoscape.js"></script>
</head>
<style>
#cy {
width: 50%;
height: 50%;
position: absolute;
top: 0px;
left: 0px;
}
#cy2 {
width: 50%;
height: 50%;
position: absolute;
top: 0px;
right: 0px;
}
</style>
<body>
<div id="cy"></div>
<div id="cy2"></div>
<script>
var cy2 = cytoscape({
container: document.getElementById('cy2'),
style: [
{
selector: 'node',
style: {
shape: 'vee',
'background-color': '#A60059',
label: 'data(id)'
}
}],
layout: {
name: 'grid'
}
});
$.getJSON("testdata.json", function (data) {
//console.log(data);
var cy = cytoscape({
container: document.getElementById('cy'),
elements: data,
style: [
{
selector: 'node',
style: {
shape: 'vee',
'background-color': '#A60059',
label: 'data(id)'
}
}],
layout: {
name: 'grid'
}
});
cy.on('select', 'node', function(evt){
evt.cyTarget.connectedEdges().animate({
style: { lineColor: 'blue' }
});
evt.cyTarget.nodes().animate({
style: {'background-color': 'yellow'}
});
});
cy.on('cxttap', 'node', function(evt) {
var newData = cy.$(':selected');
console.log(newData);
cy2.add(newData.jsons());
});
console.log(cy.$('node:selected'));
});
</script>
</body>
Das Problem ist jetzt ist, dass dies wie erwartet für die gleichzeitig ausgewählten Knoten und deren Kanten funktioniert. Wenn jedoch z.B. Wählen Sie zuerst die Knoten c und d aus und wählen Sie dann in einem nächsten Schritt den Knoten a. Wenn Sie auf den Knoten a klicken, enthält der neue Graph cy2 nur diesen einzelnen Knoten ohne die zuvor ausgewählten Knoten. Jetzt denke ich, dass ich z. Wählen Sie alle Knoten mit der Hintergrundfarbe Gelb mit ihren Kanten aus (dies sollte dann prinzipiell alle einmal ausgewählten Knoten zurückgeben). Aber das Problem ist, dass ich nicht weiß, wie das geht. So etwas wie
cy.$('background-color:yellow')
funktioniert nicht.
Noch einmal, jede Hilfe hier würde sehr geschätzt werden.
Bitte fügen Sie eine Erklärung hinzu, wie/warum dies das Problem von OP löst, so dass das Problem verstanden und gelöst und nicht einfach behoben wird –