erikbrinkman / d3-dag

Layout algorithms for visualizing directed acyclic graphs
https://erikbrinkman.github.io/d3-dag/
MIT License
1.45k stars 87 forks source link

Howto: in Javascript? #47

Closed abjbhat closed 4 years ago

abjbhat commented 4 years ago

Hi,

Is there a tutorial/reference for how to use this library in Javascript? I poked around on Observable HQ and put together this little script. However, when I run it on the browser, I get an error.

function run()
{
    var data = [
        {
          "id": "0",
          "parentIds": []
        },
        {
          "id": "1",
          "parentIds": ["0"]
        },
        {
          "id": "2",
          "parentIds": ["0"]
        },
        {
            "id": "3",
            "parentIds": ["1", "2"]
        },
        {
            "id": "4",
            "parentIds": ["0"]
        },
        {
            "id": "5",
            "parentIds": ["4"]
        }
      ];

      var layout = d3.sugiyama()
                .size([400, 400])
                .layering(d3.layeringSimplex())
                .decross(d3.decrossOpt())
                .coord(d3.coordCenter());

      layout(d3.dagConnect(data));
}

The error:

d3-dag.min.js:16 Uncaught Error: got arguments to dagConnect([object Object],[object Object],[object Object],[object Object],[object Object],[object Object]), but constructor takes no aruguments. These were probably meant as data which should be called as dagConnect()(...)
    at Object.t.dagConnect (d3-dag.min.js:16)
    at run (dag.js:36)

Thanks

Trias commented 4 years ago

Hi!

The Error message tells you what's wrong and what you need to do:

Uncaught Error: got arguments to dagConnect(...), but constructor takes no aruguments These were probably meant as data which should be called as dagConnect()(...)

so you have to call it as layout(d3.dagConnect()(data));

erikbrinkman commented 4 years ago

This solution should work, so I'm closing out this issue.