dagrejs / dagre

Directed graph layout for JavaScript
MIT License
4.68k stars 601 forks source link

Simple example does not work :( #154

Closed HumbleLearner closed 10 years ago

HumbleLearner commented 10 years ago

I am trying to make a basic example for Dager which I intend to use along with jsPlumb but unfortunately the code does not works for me. This is my code as given in documentation but simple it is not able to create the instance. Probably problem in my code only. can you please help..This is my example

<!DOCTYPE html>
<html>
<head>
    <script src="dagre.js"></script>
    <script type="text/javascript">
        // Create a new directed graph 
        var g = new dagre.graphlib.Graph();

        // Set an object for the graph label
        g.setGraph({});

        // Default to assigning a new object as a label for each new edge.
        g.setDefaultEdgeLabel(function () { return {}; });

        // Add nodes to the graph. The first argument is the node id. The second is
        // metadata about the node. In this case we're going to add labels to each of
        // our nodes.
        g.setNode("kspacey", { label: "Kevin Spacey", width: 144, height: 100 });
        g.setNode("swilliams", { label: "Saul Williams", width: 160, height: 100 });
        g.setNode("bpitt", { label: "Brad Pitt", width: 108, height: 100 });
        g.setNode("hford", { label: "Harrison Ford", width: 168, height: 100 });
        g.setNode("lwilson", { label: "Luke Wilson", width: 144, height: 100 });
        g.setNode("kbacon", { label: "Kevin Bacon", width: 121, height: 100 });

        // Add edges to the graph.
        g.setEdge("kspacey", "swilliams");
        g.setEdge("swilliams", "kbacon");
        g.setEdge("bpitt", "kbacon");
        g.setEdge("hford", "lwilson");
        g.setEdge("lwilson", "kbacon");

        dagre.layout(g);

        g.nodes().forEach(function (v) {
            console.log("Node " + v + ": " + JSON.stringify(g.node(v)));
        });
        g.edges().forEach(function (e) {
            console.log("Edge " + e.v + " -> " + e.w + ": " + JSON.stringify(g.edge(e)));
        });
    </script>
</head>
<body>
</body>
</html>
cpettitt commented 10 years ago

It looks like your example didn't make it. Maybe try using a code block or posting to a gist.

HumbleLearner commented 10 years ago

Sorry for that..I have updated it with a code block.

cpettitt commented 10 years ago

Are you not seeing the output in the console, or something else? I verified that the correct output is being sent to the console. If you're not seeing the output in the console, do you see any errors? What browser are you using?

HumbleLearner commented 10 years ago

Thanks for the help. I have updated dagger library to v0.5.1 and that solved the issue.