cytoscape.js как отобразить узлы в div? - PullRequest
Новая
       22

cytoscape.js как отобразить узлы в div?

0 голосов
/ 12 сентября 2018

Я уже некоторое время пытаюсь найти код, но отображается только пустое значение div, и я не знаю, почему. 

         var elementsStr = "[";
         for(var i = 0;i < elements.length; i++) {
             var toConCat = "{data:{id:\"node-" + i + "\"}},";
             elementsStr = elementsStr.concat(toConCat);
             if(isEven(i) && i != 0) {
                 console.log(i);
                 toConCat = "{data: {id:\"edge-" + i/2 + "\",source:\"node-" + i-1 + "\",target:\"node-" + i + "\"}},";
                 elementsStr = elementsStr.concat(toConCat);
             }

         }
         var toConCat = "{data:{id:\"edge-" + (elements.length/2) + "\",source:\"node-" + (elements.length-2) + "\",target:\"node-" + (elements.length-1) + "\"}}";
         elementsStr = elementsStr.concat(toConCat);
         elementsStr = elementsStr.concat("]");
         console.log(elementsStr);
        responseDiv.innerHTML = "";
         var cy = cytoscape({
             container: responseDiv,

             style: [
                {
                    selector: 'node',
                    style: {
                        'background-color': '#666',
                        'label': 'data(id)'
                    }   
                },
                {
                    selector: 'edge',
                    style: {
                        'width': 3,
                        'line-color': '#ccc',
                        'target-arrow-color': '#ccc',
                        'target-arrow-shape': 'triangle'
                    }
                }
            ],
            layout: {
                name: 'grid',
                rows: 1
            }

         });
        var eles = cy.add(elementsStr);
        console.log(eles);
     }
 };

elementsStr равно

[{данные: {ID: "узел-0"}}, {данные: {ID: "узел-1"}}, {данные: {ID: "край-1", источник: "узел-0", цель:»node-1 "}}]

в конце, но ничего не отображается, что я делаю не так?

1 Ответ

0 голосов
/ 12 сентября 2018

Этот подход довольно сложный, просто придерживайтесь документации на cy.add () и попробуйте собрать элементы не как конкатенацию строк, а как файл json, также, возможно, используйте одинарные кавычки дляid: 

var nodes = [];
for (var i = 0; i < elements.length; i++)
    nodes.push({ group: "nodes", data: { id: i });
}
var k = 0;
for (var i = 0; i < elements.length; i+=2)
    nodes.push({ group: "edges", data: { id: "e" + k, source: "n" + i, target: "n" + (i + 1) } });
    k += 1;
}
cy.add(nodes);

В вашем html-файле просто добавьте div с правильным идентификатором, не трогайте его после этого, я действительно не знаю, почему вы добавили .innerHtml = "", вот и всене обязательно :) 1006 *

...