Cytoscape fügt ein benutzerdefiniertes Bild zum Knoten mit anklickbaren Elementen hinzu

Question

Ich baue ein Diagrammwerkzeug in Glut mit Cytoscape js und ich kann Diagrammdaten darstellen, aber ich weiß nicht, wie man jeden Knoten mit einem Bild, das andere Bilder hat, anzuzeigen/Tasten, die darin funktionieren. Grundsätzlich möchte ich es wie folgt aussehen:

Im Bild gibt es zwei Tasten (Ich werde höchstwahrscheinlich Symbole hinzufügen, als auch) und es gibt auch Etiketten, die innerhalb des Knotens gibt, die ich nicht wissen, wie man beides macht.

Hier ist der Code, den ich derzeit habe.

Vorlage:

<div class="container" > 
    <div id="cy"></div> 
</div> 

Komponente JS:

import Ember from 'ember'; 


export default Ember.Component.extend({ 
tagName: '', 

map: Ember.computed('model.map_data', function() 
{ 
if(this.get('model.map_data')){ 
    return JSON.parse(this.get('model.map_data').data) 
    } else { 
    return {}; 
    } 
}), 
cytoscape_data: Ember.computed('model.sub_apps.[]',function() { 
var ret = { 
     nodes: [], 
     edges: [] 
}; 
var red = 50;//replace with threshold 
var green = 25;//replace with threshold 
var _this = this; 
this.get("model").map_data.forEach(function(node) { 
    var y= 0; 
    var x = 0; 
    var color = 'green'; 
    if(node.value >= red){ 
    color = 'red'; 
    }else { 
    if(node.value > green){ 
     color = 'orange'; 
    } 
    } 
    var position = _this.get("map")["app" + node.id]; 
    if(position){ 
    x = parseInt(position.split(',')[0]); 
    y = parseInt(position.split(',')[1]); 
    } 
    ret["nodes"].push({ 
      data: { 
        id: node.id, 
        label: node.name, 
        node_type: 'app', 
        tooltip: node.description, 
        color: color 
      }, 
      position: { 
        x: x, 
        y: y 
      } 
    }); 
    if(node.relations) { 
    node.relations.forEach(function(parent) { 

     ret["edges"].push({ 
     data: { 
      source: node.id, 
      target: parent.app_to_id 
     } 
     }); 
    }); 
    } 
}); 

return ret; 
}), 

didInsertElement: function() { 
this._super(); 
var cy = cytoscape({ 
container: Ember.$('#cy')[0], 
elements: this.get("cytoscape_data"), 
zoom: 1, 
pan: { x: 0, y: 0 }, 
fit: true, 
randomize: false, 
layout: { 
     name: 'preset' 
    }, 
    style: [ 
    { 
     selector: 'node', 
     style: { 
     'content': 'data(label)', 
     'text-opacity': 0.8, 
     'text-valign': 'center', 
     'text-halign': 'right', 
     'width': '200px', 
     'height': '200px', 
     'border-color': 'green', 
     'border-width': 3, 
     'border-opacity': 0.5, 
     'background-image': 'url(../assets/images/base_node_image.svg)' 
     // 'background-color': 'data(color)' 
     } 
    }, 
    { 
     selector: 'edge', 
     style: { 
     'width': 6, 
     'border-color': 'green', 
     'target-arrow-shape': 'triangle', 
     'target-arrow-color': 'red', 
     'opacity': 1, 
     'curve-style': 'bezier' 
     } 
    }, 

    { 
     selector: ':selected', 
     style: { 
     'background-color': 'orange', 
     'opacity': 1 
     } 
    }, 

    { 
     selector: '.faded', 
     style: { 
     'opacity': 0.0, 
     'text-opacity': 0 
     } 
    }, 
    ], 

}); 
Ember.run.scheduleOnce('afterRender', this, function(){ 
    cy; 
}); 
cy.on('click', 'node', function(evt){ 
    var node = evt.target; 
    console.log('clicked ' + node.data('label')); 
    }); 
    }, 
}); 

Die Grafik dieser Code macht sieht wie folgt aus:

Ich kann ein Hintergrundbild anzeigen, aber es wird in einem Kreis angezeigt, von dem ich nicht weiß, wie ich es loswerden soll. Die Farbe des Kreises wird durch eine Logik bestimmt, über der ein Test stattfand, um zu sehen, ob es funktioniert und das in Ordnung ist (dies wird später für eines der Symbole auf dem Knoten verwendet). Ich kann auch die Bezeichnung für den Knoten anzeigen, aber ich weiß nicht, wie ich das innerhalb des Knotens selbst anzeigen soll.

Jede Hilfe wird geschätzt, danke!

Answer 1

Es ist nicht so trivial zu erreichen, was Sie wollen, wenn nicht unmöglich. Sie sagen "Stellen Sie jeden Knoten so ein, dass er mit einem Bild angezeigt wird, das andere Bilder/Schaltflächen enthält, die darin funktionieren."; Das bedeutet, dass Sie HTML in eine Leinwand rendern müssen. weil was cytoscape als Zeichnungsbereich setzt, ist ein HTML canvas.

Siehe @ maxfranz (Autor von cytoscape.js) für eine relevant question; wo er im Grunde sagt: "Es ist nicht möglich, HTML in einer Leinwand zu rendern, und du würdest es wahrscheinlich auch nicht zur Performance machen wollen".

Dies bedeutet HTML-Schaltflächen setzen, URLs möglicherweise nicht das, was Sie wünschen. Weitere Informationen finden Sie unter MDN Web Docs.

Das sagte; Ich denke, du schaffst es immer noch zu erreichen, was du willst; aber mit einem anderen Ansatz. Sie können cytoscape 's compound node s verwenden. Sie können die Bilder und Schaltflächen als einfache Knoten definieren und zusammengesetzte Knoten als umgebende Container definieren. Ich habe ein Arbeitsbeispiel für Sie unter follwoing github repository erstellt.

Das Endergebnis was ich habe ist wie folgt:

Ich hoffe, das hilft.