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') );
   });
  },
});

此代码呈现的图表如下所示：

我可以显示背景图像，但是它以圆圈显示，我不知道该如何消除。圆的颜色由某种逻辑决定，上面有一个逻辑，可以测试它是否有效，这很好（稍后将其用于节点上的图标之一）。我也可以显示节点的标签，但是我不知道如何在节点本身中显示标签。

任何帮助表示赞赏，谢谢！

Answer 1

如果不是不可能的话，实现你想要的并不是那么简单。您说“将每个节点设置为显示一个图像，该图像具有在其中起作用的其他图像/按钮。”; 这意味着您需要将 html 渲染到画布中；因为cytoscape作为绘图区的东西是一个HTML canvas.

有关相关问题，请参阅@maxfranz（cytoscape.js 的作者）；他基本上说“不可能在画布中呈现 HTML，您也可能不想为了性能而这样做”。

这意味着放置 html 按钮，URL 可能不是您想要的。另请参阅MDN Web 文档以获取进一步说明。

那说; 我认为你仍然可以设法实现你想要的；但采用不同的方法。您可以使用cytoscape' compound nodes 。您可以将图像和按钮定义为简单节点，并将复合节点定义为周围的容器。我在以下github 存储库中为您创建了一个工作示例。

我得到的最终结果如下：

我希望这有帮助。