javascript - 使用 cytoscape.js 循环节点

Question

我目前正在尝试使用 cytoscape.js 对图表进行循环问题是我不太明白如何做到这一点，因为有一些重复的节点。

我有这样的数据:

Sheraton Cherry, Rosaceae, Dentate, Pinnate
Pineapple Guava, Myrtaceae, Entire, Pinnate
Chinese Sumac, Rosaceae, Entire, Pinnate

正如您所看到的，一些数据正在重复。

到目前为止，这就是我得到的:

  elements: {
nodes: [
  { data: { id: 'a', name: 'Sheraton Cherry' } },
  { data:  { id: 'a1', name: 'Rosacea'}},
  { data: { id: 'a2', name: 'Dentate' } },
  { data: { id: 'a3', name: 'Pinnate' } },
  { data: { id: 'b', name: 'Pineapple Guava' } },
  { data:  { id: 'b1', name: 'Myrtaceae'}},
  { data: { id: 'b2', name: 'Entire' } },
  { data: { id: 'a3', name: 'Pinnate' } }

],
edges: [
  { data: { source: 'a1', target: 'a' }},
  { data: { source: 'a2', target: 'a' }},
  { data: { source: 'a3', target: 'a' }},
  { data: { source: 'b1', target: 'b'}},
  { data: { source: 'b2', target: 'b'}},
  { data: { source: 'a3', target: 'b'}}
]

},

我手动输入了它，图形完美地显示出来，但由于这只是部分数据，而且我还有 10 个数据，所以我应该循环节点和边。

但是我该怎么做呢？

发现了这样的东西:

var demoNodes = [];
var demoEdges = [];

demoNodes.push({

    data: {
        id: b[0],
        name:b[0]
    }
});

for (var i = 0; i < a.length; i++) {
    demoNodes.push({

        data: {
            id: a[i],
            name:a[i]
        }
    });
}

for (var i = 0; i < a.length; i++) {
    demoEdges.push({
        data: {
            source: b[0],
            target: a[i]
        }
    })
}

但仍然不起作用。

Answer 1

解析您的输入数据并将其转换为 elements JSON format .

如果您的数据仅以逗号分隔，请在输入字符串上使用 .split() 和 .trim()。请参阅https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String

Cytoscape 不允许元素具有重复的 ID，但原则上如果您在解析时(或在解析后进行另一次传递)不允许重复，那么原则上会更好。