GraphAlchemist / Alchemy

Other
517 stars 232 forks source link

Tapping fails #543

Closed valtih1978 closed 9 years ago

valtih1978 commented 9 years ago

When I click the canvas, Uncaught TypeError: Cannot read property 'vis' of undefined appears in the browser log.

It is

Uncaught TypeError: Cannot read property 'conf' of undefined - alchemy.min.js:11
a.interactions.deselectAll - alchemy.min.js:11 
(anonymous function)  - alchemy.min.js:4 

when I load this from local web server

    <div id="alchemy" class="alchemy"></div>

    <link rel="stylesheet" href="http://cdn.graphalchemist.com/alchemy.min.css"></link>
    <script type="text/javascript" src="http://cdn.graphalchemist.com/alchemy.min.js"></script>
    <script type="text/javascript">

        var some_data = {
            //nodeCaption: function(node) {alert(node) ; return node.id; }, 
            nodeCaptions: "id",
            "nodes": [{"id": 1, caption:1}, {"id": 2}, {"id": 3}],
            "edges": [
                {"source": 1,"target": 2},
                {"source": 1, "target": 3,}
            ]
        };

        alchemy.begin({"dataSource": some_data})

    </script>

Sorry, but your project is a piece of crap. Might be it is good library but trying your examples/docs exposes it this way. Many docs are missing. For instance, clicking docs->styling->nodeStyling sends me to and empty page.

PS. I have determined that if configuration is specified via url, like dataSource:charlize-demo.json then no errors occurs. But why should I specify my configuration in external file?

I have noticed that you use corrupt javascript dictionary constant. They do not permit unquoted keys, like key:"value". You demand "key": "value". You demand the quoting the keys. But verbosity does not save anything.

I have discovered nodeStyle example in the doc

nodeStyle: {
        "all": {
            "radius": 10,
            "color"  : "#68B9FE",
            "borderColor": "#127DC1",
            "borderWidth": function (d, radius) { radius / 3 },
            "captionColor": "#FFFFFF",
            "captionBackground": null,
            "captionSize": 12,
            "selected": {
                "color" : "#FFFFFF"
                "borderColor": "#349FE3"
            },
            "highlighted": {
                "color" : "#EEEEFF"
            },
            "hidden": {
                "color": "none" 
                "borderColor": "none"
            }
        }

but you do not separate colors in the subnodes with commas as JSON requires and function must return the radius. Javascript is not that functional language sot that you can omit the return.

I started conf.editorEnabled and got 'editor unknown' error.

uzilan commented 9 years ago

I have the same problem (using 0.4.1). Debugging in Chrome, I can see the following error in alchemy.js, line 1015, function deselectAll():

a = Alchemy.prototype.getInst(this);

Examining variable a shows that it is undefined.

valtih1978 commented 9 years ago

I have solved it by switching into Almende network.

valtih1978 commented 9 years ago

http://almende.github.io/vis/docs/network.html

kylerob commented 9 years ago

The problem is that a.vis creates an svg element with an attribute alchInst in the method startGraph, which uses Alchemy.prototype.instances.length - 1. This array doesn't get pushed to until the end of the method Alchemy.prototype.begin, with startGraph being called before, meaning the Alchemy.prototype.instances.length is 0 instead of 1.

A quick fix is to move Alchemy.prototype.instances.push(this); above the switch statement in Alchemy.prototype.begin:

Alchemy.prototype.begin = function(userConf) {
    var conf;
    conf = this.setConf(userConf);
    Alchemy.prototype.instances.push(this);
    switch (typeof this.conf.dataSource) {
      case 'string':
        d3.json(this.a.conf.dataSource, this.a.startGraph);
        break;
      case 'object':
        this.a.startGraph(this.a.conf.dataSource);
    }
    this.plugins.init();
    return this;
};

I'll add a pull request for this later.