标签: webcola

我的公司正在为聊天机器人构建一个图形视图编辑器。我们正在使用 Cytoscape 和cytoscape-cola扩展来实现这一点。我们面临的问题之一是动态地向图中添加新节点，而不会将它们与图上的现有节点重叠。

我已经查看了以前的类似问题（如下所列），但无济于事：

我在那里尝试了解决方案，即仅在新添加的节点上应用布局，但它们一直堆积在屏幕中央。

我尝试了此处提到的解决方案，但无论是一次性锁定节点还是cy.nodes().lock()单独cy.nodes().forEach(node => node.lock())锁定节点，锁定节点仍会继续移动。这里要注意的另一个有趣的事情是，当单独锁定节点时，无论我是否在上面的调用中锁定，新添加的节点也会被锁定。

我也尝试过这个解决方案，但锁定的节点仍然会移动，并且整个布局发生了变化——有时完全改变，有时只是一点点。

代码

这是我目前用来构建图表的内容：

const layoutConfig = {
    name: "cola",
    handleDisconnected: true,
    animate: true,
    avoidOverlap: true,
    infinite: false,
    unconstrIter: 1,
    userConstIter: 0,
    allConstIter: 1,
    ready: e => {
        e.cy.fit()
        e.cy.center()
    }
}
this.graph = Cytoscape({ ... })

this.layout = this.grapg.makeLayout(layoutConfig)

this.layout.run();

这是我用来向图中添加新节点的内容：

const addElements = (elements: ElementSingular | ElementMultiple) => {
    this.graph.nodes().forEach(node => {
        node.lock();
    })

    this.graph.add(elements)

    this.layout …

标题##尝试让 cola.js“具有分层分组的布局”设置。

尝试在我的浏览器中创建以下内容：

http://marvl.infotech.monash.edu/webcola/examples/gridifiedSmallGroups.html

我收到错误：

d[a.type] 不是函数

cola.min.js:2023 Uncaught TypeError: d[a.type] 不是函数

 return a.d3adaptor = function() {
        var d = d3.dispatch("start", "tick", "end"),
            e = a.adaptor({
                trigger: function(a) {
                    d[a.type](a)
                },
                on: function(a, b) {
                    return d.on(a, b), e
                },
                kick: function(a) {
                    d3.timer(a)
                },
                drag: function() {
                    var a = d3.behavior.drag().origin(function(a) {
                        return a
                    }).on("dragstart.d3adaptor", b).on("drag.d3adaptor", function(a) {
                        a.px = d3.event.x, a.py = d3.event.y, e.resume()
                    }).on("dragend.d3adaptor", c);
                    return arguments.length ? void this.call(a) : a
                }
            });
        return e
    }, …

我最近了解了一个优秀的 JS 库 cola.js 。它可以做一个力量布局和支持团体。在此处了解更多信息：Cola.js

我创建了一个简单的演示来显示具有打开组功能的力布局。但我对打开行为感到困惑。

我觉得打开一个组的时候，新的布局应该是在上一个布局的基础上做一个小的调整。但现在它重新布局所有节点。为什么 ？

我从这个链接中学到了一些理想：官方演示：在线图探索，看起来很复杂。动态添加到图中的新节点的坐标应设置为打开组的坐标。不幸的是，它也无法解决我的问题。

以下是我的演示：

var w = 480, h = 420, cola;
var data = {
	"nodes": [
		{"name": "Top","width": 60,"height": 60},
		{"name": "A","width": 60,"height": 60},
		{"name": "B","width": 60,"height": 60},
		{"name": "C","width": 60,"height": 60},
		{"name": "D","width": 60,"height": 60},
		{"name": "E","width": 60,"height": 60},
		{"name": "F","width": 60,"height": 60},
		{"name": "G","width": 60,"height": 60},
		{"name": "H","width": 60,"height": 60},
		{"name": "I","width": 60,"height": 60}
	],
	"links": [
		{"source": 0,"target": 6},
		{"source": 0,"target": 4},
		{"source": 0,"target": 3},
		{"source": …

我希望允许用户使用d3 forceSimulation或CoLa 布局查看他们的网络，这意味着当用户触发事件时，我需要更改哪些布局算法正在更新我的节点和边的属性x。y

特别是，这要求我能够停止模拟并防止它们在其他属性处于“活动”状态时更新我提供给它们的数据上的这些属性，以及删除与它们关联的拖动处理程序。

我的渲染函数目前有：

if (use_cola) {

  // MUST TURN OFF D3 AND ITS DRAG HANDLERS!

  force = cola_force.nodes(graph.nodes)
    .links(links)
    .groups(groups[group_nodes_by])
    .jaccardLinkLengths(repulsion_strength, 0.7)
    .avoidOverlaps(true)
    .start(50, 0, 50);

  node.call(cola_force.drag);
  group.call(cola_force.drag);

  cola_force.on('tick', ticked);

} else {  // d3

  // MUST TURN OFF COLA AND ITS DRAG HANDLERS!

  force = d3_force.nodes(graph.nodes)
    .force("link", d3.forceLink(links))
    .force("charge", d3.forceManyBody().strength(-repulsion_strength))
    .force("center", d3.forceCenter(w / 2, h / 2));

  node.call(d3.drag()
    .on("start", dragstarted)
    .on("drag", dragged)
    .on("end", dragended));  // where those are the conventional …

该cytoscape.js可乐文档的gapInequalities一个元素layout字典上说：

  gapInequalities: undefined, // list of inequality constraints for the gap between the nodes,
                              // e.g. [{"axis":"y", "left":node1, "right":node2, "gap":25}]

您如何设置，在值指定节点的对象left和right？

maxkfranz 在这里很有帮助地指出这些对象需要是集合对象。这些包含对指定节点（“元素”）的引用，并通过查询 cytoscape.js“核心对象”创建。我不清楚的是，鉴于layout对象需要引用节点元素，并且在layout告诉如何渲染它们之前不应将元素添加到图中，您如何正确设置这些集合对象？

例如，要指定 nodeb应该放在 node 上方a，下面的代码中是什么来代替???a???和???b???？

cy = cytoscape({
  elements: [
      { data: { id: 'a' } },
      { data: { id: 'b' } },
      . . .
  ],
  layout: {
    name: …

我正在尝试使用 viz.js 以外的其他东西构建 graphql 模式可视化工具（该库太大，并且向捆绑包添加了 1MB）。有人向我推荐了 webcola，它似乎是一个非常强大的库。

我已经达到了正确渲染和链接必要元素的程度。我的下一步是调整布局。我想做一些类似于graphql-voyager（使用 viz.js）的事情。

这是我迄今为止所拥有的代码和框：

graphql 图

编辑：我的问题是，我如何布置与 graphql-voyager 类似的内容？我希望帮助设置正确的约束并应用必要的算法来定位节点并相应地路由边缘。