Manually Add Nodes to JavaScript InfoVis Toolkit Force Directed Graph

Question

I am attempting to use the JavaScript InfoVis Toolkit found here: JS InfoVis ToolKit to create a Force Directed Graph. We don't really want to use a JSON to "feed" the data to the graph -- instead we would rather manually add nodes.

I have put together the following code -- but when I attempt to draw the graph my root node is not found in line 7118 of jit.js (var root = aGraph.getNode(id);). I have omitted the specifics on my ForceDirected options -- but those should not affect the result.

        fd = new $jit.ForceDirected({...}) 
        //Create main node
        var rootNode = { id: "root", name: "Actors", data: { "$color": "#557EAA"} }
        fd.root = rootNode;
        fd.graph.addNode(rootNode);

        $.each(array, function (index, art) {
            var pubId = art.pubMedId.toString();
            var labelText = "Article " + pubId;
            var node = { id: pubId.toString(), name: labelText, data: { "$color": "#557EAA"} }

            //Create Nodes -- connect them to main node for now
            fd.graph.addNode(node);
            fd.graph.addAdjacence(rootNode, node, {});

            text = text + art.pubMedId + ',';
        });

        //Display graph
        fd.plot();

Does anyone have experience doing this?? Looking for guidance. I have debugged in FireBug and everything appears to be loaded into the graph correctly (ie - all nodes exist). I am at a loss.

Answer 1

Instead of fd.root = rootNode;, you want to use fd.root = rootNode.id;. I was surprised by this as well.

Additionally, you'll probably want to initialize the Graph before adding the root node:

fd.graph = new $jit.Graph(fd.graphOptions, fd.config.Node, fd.config.Edge, fd.config.Label);

Note: tested with version 2.0.1.