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

仍然感谢

Answer 1

看看这个code pen，您可以通过定义背景或边框来指定一个内圆：

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'
      }
    },
    ...

Answer 2

恐怕这在Cytoscape.js中是不可能的。最好的选择是使用背景图片。

您也可以尝试将边框样式设置为double，但这是非常有限的-您将无法更改线之间的距离。

Answer 3

您可以在具有一个或多个SVG背景图像的节点上绘制任意内容。

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

3 个答案: