繁体   English   中英

在cytoscape.js中通过cy.add()添加多个边后使用mapData()

using mapData() after adding several edges by cy.add() in cytoscape.js

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我正在使用cytoscape.js将原始txt数据转换为cytoscape.js图。 为此,首先我用: var cy = cytoscape({...})没有任何元素的图。然后从txt文件读取节点和边后,我将其与此添加到节点中:

        cy.add({
            data: {id: keys[i]}
        }
    );

这对于边缘:

        cy.add({
        data: {
            id: 'edge' + i,
            source: edges[i].source,
            target: edges[i].target,
            label: edges[i].weight
        }

    });

然后我想应用'width': 'mapData(weight, 0, 100, 1, 6)' 我怎样才能做到这一点? 我尝试了这些:1)在使cy变量时在边缘选择器中使用mapData()(不适用于添加的边缘和节点)

2)在制作完每个边缘后,对每个边缘使用mapData(): cy.$('#edge' + i).style('width','mapData(weight, 0, 100, 1, 6)');

3)在制作完所有节点和边后使用mapData(): cy.elements('edge').style('line-color','mapData(weight,1,6,blue,green)');

它们都不起作用!

1 个回复

也许是这样的:

var cy = window.cy = cytoscape({
    container: document.getElementById('cy'),
    style: [
      {
        selector: 'node',
        style: {
          'label': 'data(name)',
          'width': 'mapData(weight, 0, 100, 1, 6)',
          'height': 'mapData(weight, 0, 100, 1, 6)',
        }
      }
    ]
  });

cy.add([
  { group: "nodes", data: { id: "n0", name: "node0", weight: "x"} },
  { group: "nodes", data: { id: "n1", name: "node1", weight: "y"} },
  { group: "edges", data: { id: "e0", source: "n0", target: "n1" } }
]);

cy.ready(function ()  {            // Wait for nodes to be added
    cy.layout(                     // Call layout
        name: 'yourDecision'
    ).run();
});

我在初始化时定义cytoscape实例,并在其中定义node / edges / ...的样式。

1 为cytoscape.js mapData设置变量限制

快速提问。 我正在尝试使用cytoscape's.js mapData线性映射器在小图中设置边缘的颜色。 但是,存在一个小问题。 以下示例可以顺利进行。 但是,一旦我替换了固定的边界,我就会有点烦。 彩色的边缘消失,并且全部变成灰色。 最小和最大变量是事先设置的,我可以验 ...

2 Cytoscape.js cy.style():替换选择器而不是添加

我写了一个简单的边缘编辑 function,因为我无法安装扩展。 这是我在每个控制节点移动时所做的: id是活动边的 id。 如果选择器相同,我希望此代码每次调用它时都会替换匹配'control-point-distances'和'control-point-weights' 。 然而事实并非如此 ...

4 cy.add不是函数

创建我的cytoscape obj后(我使用的是“就绪”回调),我执行ajax查询以获取节点列表,然后尝试添加它们。 但是,我收到错误信息“ cy.add不是函数”。 我想念什么? 准备好文件后: 在refreshNodes()中: 当我在ready中设置断点并转储cy ...

5 cytoscape.js冗余边缘

如果图形具有多余的边/弧,cytoscape.js将无法呈现图形。 为什么会这样呢? 例: https://jsfiddle.net/smiccke/mq5t1rw9/4/ $(function() { var cy = window.cy = cytoscape( ...

6 Cytoscape.js堆叠的边缘

我希望能够通过cytoscape.js使用颜色在一行(边缘)上显示多个信息。 我可以在几个边缘上显示它,但是使用贝塞尔曲线会大大增加视觉结果的复杂性,并且直边重叠,我可以找到一种抵消它们的方法... 这是所需输出的一个示例,查看粉红色的黄色和深色的品红色线条: (沿着线点划线的3 ...

7 cytoscape.js 中的锥形边缘

有没有办法在 cytoscape.js 中实现锥形边缘(参见 Danny Holten、Petra Isenberg、Jean-Daniel Fekete 和 J. Van Wijk(2010)Node-Link 中锥形、弯曲和动画定向边缘表示的性能评估图表。研究报告,2010 年 9 月。)谢谢! ...

8 用cytoscape.js标记边缘

我正在学习cytoscape.js 。 我想创建带有节点和边的图形。 将使用运行时数据创建图形。 我想基于数据值在边缘上添加标签。 每个标签将具有不同的值。 谁能帮我提供一些详细的示例。 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM