Cytoscapeはクリック可能なアイテムを持つノードにカスタム画像を追加します

Question

私はcytoscape jsを使用してemberにチャートツールを構築していますが、グラフデータをレンダリングできますが、他の画像を持つ画像/ボタンはその中で機能します。基本的に私はそれが次のようになりたい：画像で

は二つのボタンがある（私が最も可能性が高いだけでなく、アイコンが追加されます）とも私にはないノード内に存在するラベルがありますいずれかを行う方法を知っている。ここで

は、私が現在持っているコードです。

テンプレート：

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

コンポーネント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')); 
    }); 
    }, 
}); 

チャートこのコードは、このようなルックスをレンダリングする：

私は背景イメージを表示することができますが、それは私がどのように取り除くか分からない円で表示されます。円の色は、それがうまくいくかどうかを調べるためのテストであった上記のロジックによって決定されます（それは後でノードのアイコンの1つに使用されます）。ノードのラベルを表示することもできますが、ノード自体のラベルを表示する方法はわかりません。

ご協力いただきありがとうございます。

Answer 1

不可能ではない場合、あなたが望むものを達成するためにそう簡単ではありません。 「各ノードを、その中で機能する他の画像/ボタンを持つ画像で表示するように設定する」と言う。つまり、htmlをキャンバスにレンダリングする必要があります。どのくらいcytoscapeが描画領域に配置されているかはHTML canvasです。

relevant questionの@ maxfranzさん（cytoscape.jsの著者）を参照してください。彼は基本的に「キャンバス内でHTMLをレンダリングすることはできませんし、パフォーマンスのためにHTMLをレンダリングすることもできません」と言っています。

これは、HTMLボタンを配置することを意味します。希望するURLとは異なる可能性があります。さらなる説明については、MDN Web Docsも参照してください。前記

私はあなたが望むものを達成するためにはまだ管理できると思います。しかし、別のアプローチで。 cytoscapeのcompound nodeを使用できます。イメージとボタンを単純なノードとして定義し、複合ノードを周囲のコンテナとして定義することができます。 follwoing github repositoryであなたのための実例を作成しました。

次のように私が得た最終的な結果は次のとおりです。

私はこのことができます願っています。