标签: cytoscape.js

D3.js和Cytoscape.js有什么区别？

为什么有人会选择Cytoscape而不是D3.js？

如何使用Cytoscape.js在边缘添加标签？

我正在尝试使用Cytoscape和ReactJS以及在我尝试的简单组件中没有显示任何内容.

这是代码.我在mapStateToProps中返回一个空对象,因为我试图显示一个静态图形,其中我对边缘和节点进行了硬编码.

我正在使用的Cytoscape版本来自我的package.json

"cytoscape":"^ 2.7.6","反应":"^ 15.2.1",

这是我用于我的样本的Cyctoscape jsbin.

在此输入链接描述

感谢任何帮助.

谢谢

import React,{Component} from 'react';
import cytoscape from 'cytoscape';

import {connect} from 'react-redux';
import { bindActionCreators } from 'redux';

class GraphContainer extends React.Component{
    constructor(props){
        super(props);
        this.renderCytoscapeElement = this.renderCytoscapeElement.bind(this);
    }

    renderCytoscapeElement(){

        console.log('* Cytoscape.js is rendering the graph..');

        this.cy = cytoscape(
        {
            container: document.getElementById('cy'),

            boxSelectionEnabled: false,
            autounselectify: true,

            style: cytoscape.stylesheet()
                .selector('node')
                .css({
                    'height': 80,
                    'width': 80,
                    'background-fit': 'cover',
                    'border-color': '#000',
                    'border-width': 3,
                    'border-opacity': 0.5,
                    'content': 'data(name)',
                    'text-valign': 'center',
                })
                .selector('edge')
                .css({
                    'width': …

我注意到使用当前不稳定分支(2.7.0-unstable)时缺少边缘源或目标箭头.下面是标准的cy演示.这是一个已知问题还是有变化？

我在用 Javascript 生成好看的家谱时遇到问题。

要求：

• 每个孩子都应该连接到树中的两个父母，而不是一些图中的一个
• 我喜欢配偶在树上彼此相邻（相同的垂直位置）
• 我想把节点按世代纵向组织起来，让你一眼就能看到同一年代出生的人。
• 随着时间的推移，一个人可以有多个配偶，每个人都有孩子
• 树中可以自由添加父子，不要只是“一人向上溯源”

我试过的最接近这个：

1. 使用Dagre作为布局引擎的Cytoscape JS，启用曲线样式：出租车边缘。

   （随机数据图表，实线为亲子关系，虚线为配偶）

   问题是配偶彼此不一致。Dagre 历来支持“等级”作为节点的参数，这意味着您可以强制某些节点处于特定高度（如果愿意，可以将其视为“一代”）。不幸的是，它不再起作用，负责的开发人员也不再从事该项目。这将很好地解决我的问题。

我尝试过但失败的其他事情：

1. 将 dagre 降级到支持排名的旧版本？

   还没有获得使用任何版本的 dagre 的等级。

2. D3与dagre-d3

   和上面一样的问题，因为dagre-d3是dagre的修改版本，这意味着它不支持按代排序。

3. yFiles 家谱演示看起来很棒，但很商业化。对于我的目的（希望任何人建立自己的家谱），单个开发人员许可证的成本是 26.000 美元（！？！）。显然不能接受。

   

我的问题

是否可以像我上面描述的那样垂直对齐我的 cytoscape/dagre 图中的节点？

如果没有，我愿意尝试其他库和其他布局算法。

我正在寻找一个看起来类似于 yFiles 解决方案但使用开源工具的工作示例。

我使用cytoscape.js 2.2.5在angular.js应用程序中绘制图形,我可以正确选择节点.当<div>图形移动时,画布上的鼠标指针位置不会更新.这意味着我必须单击节点的"旧"位置才能选择它.

我想cy.reset(),cy.center()和cy.fit(),但鼠标指针位置不会改变.

更改cytoscape的位置后,如何更新图形<div>？

原始页面:

改变<div>立场后

当我移除蓝色面板并且图形<div>向上移动时,鼠标指针位置错误.我使用ng-show指令(使用css hidden/visible).

使用cytoscape.js创建图形.我已将布局设置为"网格".需要解决以下问题:原图 -

从Host3到Host1以及从Host5到host1的边缘,从Host5到Host1的边缘与Host3到Host1的边缘重叠.

重叠边缘应如下所示:

怎么做？谢谢 !

我正在尝试使用“内容”和下方的文本标签来显示在节点中心具有字体图标的节点。

我的造型目前是：

{
  'selector': 'node[icon]',
  'style': {
    'content': 'data(icon)',
    'font-family': 'Material Icons',
    'text-valign': 'center',
    'text-halign': 'center'
  }
},
{
  'selector': 'node[label]',
  'style': {
    'label': 'data(label)',
    'text-valign': 'bottom',
    'text-halign': 'center'
  }
}

但是，这不起作用，因为我假设这两种样式都用于一个元素（节点）。

我考虑了几种解决方案，例如：

• 将标签放在父节点上
• 使用 Popper.js 或类似工具显示标签
• 使用多行标签

前两个看起来很“hacky”，第三个可能会导致很多对齐问题。有没有更好的解决方案？

我想为我的根节点设置与屏幕上其他节点不同的颜色,我已经做了一些预先工作来识别根节点的值并让它在变量中随时可用.然而,在尝试设计图形时没有任何事情发生,并且很难通过这种方式进行调试.

例:

nodes: [{id = 1}, {id=2}]

var startingNode = 1; //root node

$('#cy').cytoscape({
                style: [
                    {
                        selector: 'node',
                        css: {
                            'content': 'data(id)',
                            'background-color': 'red',
                            'color': 'black',
                            'border-width': '1px',
                            'border-color': 'black'
                        }
                    },
                    {
                        selector: "node[content = 'startingNode']", 
                        css: {
                            'content': 'data(id)',
                            'background-color': 'purple',
                            'color': 'black',
                            'border-width': '1px',
                            'border-color': 'black'

                        }
                    }]

// more info for cytoscape rendering omitted

});

任何输入都会有所帮助!

谢谢,保罗G.

我开始使用这个很棒的库，并且我想做一个非常简单的事情：更改节点的大小。

当我从服务器上获得节点时，它们具有一个size属性，该属性是1到6之间的整数。我想显示结果的大小。

我已经尝试过该weight属性：

for (var i = 0; i < self.galaxy.nodes.length; i++) {
        cy.add({
            group: 'nodes',
            data: { id: self.galaxy.nodes[i].id.toString(), weight: self.galaxy.nodes[i].size },
            position: { x: self.galaxy.nodes[i].x , y: self.galaxy.nodes[i].y}
        });
    }

但不幸的是，尺寸保持不变，我在文档中找不到方向。你有什么线索给我吗？