cytoscape.js и простой пример метеора не работает

  1. Я добавил в метеоритный cytoscape: infinitedg: cytoscape
  2. у меня очень простое приложение Meteor:

hello.js http://pastebin.com/2frsHc9g hello.html http://pastebin.com/10EYyJ74

но я не могу заставить его работать

вот ошибка, которую я вижу в консоли веб-браузера:

при визуализации заволана hello.js: 9 ss [объект объекта] debug.js: 41 Исключение из Tracker, функция afterFlush: debug.js: 41 TypeError: Невозможно прочитать свойство addEventListener неопределенного значения в CanvasRenderer.registerBinding (infinitedg_cytoscape.js: 17127) в CanvasRenderer.load (infinitedg_cytoscape.js: 17283) в новом CanvasRenderer (infinitedg_cytoscape.js: 13419) в $$. fn.core.initRenderer (infinitedg_cytoscape.js: 7527) в новом $$. Core (infinitedg_cytoscape) .js в Function. $$. init (infinitedg_cytoscape.js: 75) в cytoscape (infinitedg_cytoscape.js: 58) в HTMLDivElement. (infinitedg_cytoscape.js: 2808) в Function.jQuery.extend.each (jquery.js: 384) в jQuery.fn.jQuery.each (jquery.js: 136)

у вас есть, пожалуйста, какой-нибудь "привет мир" комбинации цитопространства и метеора?


javascript meteor cytoscape.js cytoscape-web
person Hynek Los kamute    schedule 16.01.2016    source источник

Ответы (1)


arrow_upward
3
arrow_downward

проблема была в неправильной библиотеке, установленной через метеор

после того, как я установил правильную библиотеку cytoscape, она работает

правильно - cytoscape: cytoscape

вот минимальный и рабочий пример:

JS

sit = "" //hlavni objekt

if (Meteor.isClient) {




    Template.graf.rendered = function() {

        // Meteor.defer(function() {
        //setTimeout(function(){

        console.log("on rendered called");
        //var divcy = $('#cy');
        // console.log("ss " + divcy);
        sit = cytoscape({
            container: document.getElementById('cy'),


            ready: function() {
                console.log("network ready");
                updateNetworkData(sit); // load data when cy is ready
            },

            style: cytoscape.stylesheet()
                .selector('node')
                .style({
                    'content': function(e) {
                        return e.data("name")
                    },

                    'font-size': 12,
                    'text-valign': 'center',
                    'color': 'white',
                    'text-outline-width': 2,
                    'text-outline-color': function(e) {
                        return e.locked() ? "red" : "#888"
                    },
                    'min-zoomed-font-size': 8
                        // 'width': 'mapData(score, 0, 1, 20, 50)',
                        // 'height': 'mapData(score, 0, 1, 20, 50)'
                })
                .selector('edge')
                .style({
                    'content': function(e) {
                        return e.data("name") ? e.data("name") : "";
                    },
                    'target-arrow-shape': 'triangle',
                })


        });

        //})
    }




}

if (Meteor.isServer) {
    Meteor.startup(function() {
        // code to run on server at startup
    });
}



function updateNetworkData(net) {

    // init Data

    var nodes = [{ // node a
            group: 'nodes',
            data: {
                id: 'a',
                name:'a'
            }
        }, { // node b
            group: 'nodes',
            data: {
                id: 'b',
              name:'b'
            }
        }

    ]
    var edges = [{ // edge ab
            group: 'edges',
            data: {
                id: 'ab',
              name:'ab',
                source: 'a',
                target: 'b'
            }
        }

    ]

    net.elements().remove(); // make sure evything is clean

    net.add(nodes);
    net.add(edges);

    net.reset() // render layout
}

CSS

#cy {
  width : 70vw;
  height: 50vw;
  position: absolute;
}

HTML

<head>
  <title>hello</title>
</head>

<body>
  <h1>Welcome to Meteor!b</h1>
  {{>graf}}
</body>

<template name="graf">
  <div id="cy"></div>
</template>
person Hynek Los kamute    schedule 17.01.2016
comment
1 исправление - изначально я написал правильно, это maxkfranz: cytoscape, но maxkfranz отредактировал его, чтобы исправить это cytoscape: cytoscape. к сожалению, этот пример не работает с cytoscape: cytoscape, но работает с maxkfranz: cytoscape .. Я проверяю, почему, и обновлю ответ, чтобы он соответствовал ему .. Думаю, maxkfranz захочется использовать для будущего cytoscape: cytoscape - person Hynek Los kamute; 21.01.2016
comment
Я отказался от попытки заставить работать пакет meteor cytoscape: cytoscape.js ... Я недостаточно разбираюсь в javascript, чтобы найти причину. что я вижу, я могу сделать cytoscape: cytoscape.js, работающий только с кругом макета ... мне не удалось заставить работать cose ... также я не мог добавить ничего другого (например, cose-bilkent), короче этот пример работает только с maxkfranz : cytoscape, и я пытаюсь дать более точное описание системе отслеживания проблем cytoscape.js по этому поводу ... - person Hynek Los kamute; 30.01.2016
comment
Я также обнаружил, что cytoscape: cytoscape не работает на Meteor. maxkfranz: cytoscape есть, но мне трудно реализовать и для этого множество функций. Кажется, намного проще просто создать веб-страницу с нуля. - person thegreenfrog; 05.02.2016
comment
@thegreenfrog - на самом деле я двигаюсь вперед ... через неделю или две я обновлю оба своих вопроса здесь, в стеках ... - person Hynek Los kamute; 05.02.2016