我正在使用 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') );
});
},
});
此代码呈现的图表如下所示:
我可以显示背景图像,但它显示在一个我不知道如何摆脱的圆圈中。圆圈的颜色由上面的一些逻辑决定,这是一个测试,看它是否有效(稍后将用于节点上的一个图标)。我还可以显示节点的标签,但我不知道如何在节点本身内显示它。
感谢任何帮助,谢谢!
最佳答案
即使不是不可能,实现您想要的也不是那么微不足道。您说“将每个节点设置为显示一个图像,该图像具有在其中起作用的其他图像/按钮。”;这意味着您需要将 html 渲染到 Canvas 中;因为 cytoscape
放置在绘图区的是一个 HTML canvas
。
参见@maxfranz(cytoscape.js 的作者)relevant question ;他基本上说“在 Canvas 中呈现 HTML 是不可能的,你也可能不想为了性能”。
这意味着放置 html 按钮,URL 可能不是您想要的。另见 MDN Web Docs进一步解释。
也就是说;我认为你仍然可以设法实现你想要的;但采用不同的方法。您可以使用cytoscape
的复合节点
。您可以将图像和按钮定义为简单节点,将复合节点定义为周围容器。我在 follwoing github repository 为您创建了一个工作示例.
我得到的最终结果如下:
希望对您有所帮助。
关于javascript - Cytoscape 将自定义图像添加到带有可点击项目的节点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47702547/