cytoscape.js - 如何在 cytoscape.js 节点中绘制内切圆

Question

我需要（在 cytoscape.js 中）绘制一个与另一个圆圈相连的圆圈。我可以用以下方法制作外圈：

shape:'ellipse',
height: 15,
width: 15,
'background-color': 'white',
'border-width':0.5,
'border-color':'black'

但是我怎样才能让另一个圆圈刻出来呢？

编辑：特别是，我必须放入一个带有黑色圆周的白色圆圈，一个带有黑色圆周的较小的白色圆圈。

第二次编辑：我通过创建一个在拖动或抓取时跟随原始节点的假节点（等于真实节点但更小）来解决。

var compAtrr = cy.$('node[type = "originalnode"]');
    compAtrr.on('grabon drag',function(evt){
        var node = evt.target;
        var idnode = node.data('id');
        var fakenode = cy.$id(idnode+'fake');
        var ix = node.position('x');
        var iy = node.position('y');
        fakenode.position({
            x: ix,
            y: iy
        });
    });

    var fakeAtrr = cy.$('node[type = "fakenode"]');
    fakeAtrr.on('grabon drag',function(evt){
        var node = evt.target;
        var idnode = node.data('id');
        var l = idnode.length;
        idnode = idnode.slice(0,l-4); //remove 'fake' string
        var realnode = cy.$id(idnode);
        var ix = node.position('x');
        var iy = node.position('y');
        realnode.position({
            x: ix,
            y: iy
        });
    });

不管怎么说，还是要谢谢你

标签： cytoscape.js

Answer 1

看看这个代码笔，你可以通过定义背景或边框来指定一个内圈：

style: [
    {
      selector: 'node',
      css: {
        'content': 'data(id)',
        'text-valign': 'center',
        'text-halign': 'center',
        'height': '60px',
        'width': '60px',
        'border-color': 'black',
        'border-opacity': '1',
        'border-width': '10px'
      }
    },
    ...