{"id":16687026,"url":"https://github.com/paralin/meteor-dagre-d3","last_synced_at":"2026-03-27T02:36:25.157Z","repository":{"id":16184859,"uuid":"18931417","full_name":"paralin/meteor-dagre-d3","owner":"paralin","description":"A d3 renderer for the dagre layout engine.","archived":false,"fork":false,"pushed_at":"2014-05-10T19:57:06.000Z","size":260,"stargazers_count":8,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-10-05T22:36:25.119Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"awslabs/aws-lambda-zombie-workshop","license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/paralin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-04-19T02:21:37.000Z","updated_at":"2020-02-23T17:06:10.000Z","dependencies_parsed_at":"2022-09-04T06:21:33.984Z","dependency_job_id":null,"html_url":"https://github.com/paralin/meteor-dagre-d3","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"purl":"pkg:github/paralin/meteor-dagre-d3","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paralin%2Fmeteor-dagre-d3","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paralin%2Fmeteor-dagre-d3/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paralin%2Fmeteor-dagre-d3/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paralin%2Fmeteor-dagre-d3/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/paralin","download_url":"https://codeload.github.com/paralin/meteor-dagre-d3/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paralin%2Fmeteor-dagre-d3/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31010735,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-27T02:33:22.146Z","status":"ssl_error","status_checked_at":"2026-03-27T02:33:21.763Z","response_time":164,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-12T15:07:34.799Z","updated_at":"2026-03-27T02:36:25.138Z","avatar_url":"https://github.com/paralin.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# D3-based renderer for Dagre\n\nThis is the dagre d3 renderer packaged for Meteor with some additional helpful utilities.\n\n**You can view the original non-meteor repository [here](https://github.com/cpettitt/dagre-d3).**\n\nDagre is a JavaScript library that makes it easy to lay out directed graphs on\nthe client-side. The dagre-d3 library acts a front-end to dagre, providing\nactual rendering using [D3][].\n\n## Demo\n\nThere will be a demo of the new `ReactiveDagre` class added to the meteor implementation soon.\n\n## Getting dagre-d3\n\nYou can install it with meteorite:\n\n```\nmrt add dagred3\n```\n\n## Using dagre-d3\n\nWith dagre-d3, you will first create a graph, then render it. Much of this process is wrapped in `ReactiveDagre`, which is outlined below.\n\n### Creating a Graph\n\nThe renderer uses [graphlib](https://github.com/cpettitt/graphlib) to create graphs in\ndagre, so its probably worth taking a look at its\n[API](http://cpettitt.github.io/project/graphlib/latest/doc/index.html).\nGraphlib comes bundled with dagre-d3.\n\n```js\n// Create a new directed graph\nvar g = new dagreD3.Digraph();\n\n// Add nodes to the graph. The first argument is the node id. The second is\n// metadata about the node. In this case we're going to add labels to each of\n// our nodes.\ng.addNode(\"kspacey\",    { label: \"Kevin Spacey\" });\ng.addNode(\"swilliams\",  { label: \"Saul Williams\" });\ng.addNode(\"bpitt\",      { label: \"Brad Pitt\" });\ng.addNode(\"hford\",      { label: \"Harrison Ford\" });\ng.addNode(\"lwilson\",    { label: \"Luke Wilson\" });\ng.addNode(\"kbacon\",     { label: \"Kevin Bacon\" });\n\n// Add edges to the graph. The first argument is the edge id. Here we use null\n// to indicate that an arbitrary edge id can be assigned automatically. The\n// second argument is the source of the edge. The third argument is the target\n// of the edge. The last argument is the edge metadata.\ng.addEdge(null, \"kspacey\",   \"swilliams\", { label: \"K-PAX\" });\ng.addEdge(null, \"swilliams\", \"kbacon\",    { label: \"These Vagabond Shoes\" });\ng.addEdge(null, \"bpitt\",     \"kbacon\",    { label: \"Sleepers\" });\ng.addEdge(null, \"hford\",     \"lwilson\",   { label: \"Anchorman 2\" });\ng.addEdge(null, \"lwilson\",   \"kbacon\",    { label: \"Telling Lies in America\" });\n```\n\n### Rendering the Graph\n\nTo render the graph, we first need to create an SVG element on our page:\n\n```html\n\u003csvg width=650 height=680\u003e\n    \u003cg transform=\"translate(20,20)\"/\u003e\n\u003c/svg\u003e\n```\n\nThen we ask the renderer to draw our graph in the SVG element:\n\n```js\nvar renderer = new dagreD3.Renderer();\nrenderer.run(g, d3.select(\"svg g\"));\n```\n\nWe also need to add some basic style information to get a usable graph. These values can be tweaked, of course.\n\n```css\n\u003cstyle\u003e\nsvg {\n    overflow: hidden;\n}\n\n.node rect {\n    stroke: #333;\n    stroke-width: 1.5px;\n    fill: #fff;\n}\n\n.edgeLabel rect {\n    fill: #fff;\n}\n\n.edgePath {\n    stroke: #333;\n    stroke-width: 1.5px;\n    fill: none;\n}\n\u003c/style\u003e\n```\n\nThis produces the graph:\n\n![oracle-of-bacon1.png](http://cpettitt.github.io/project/dagre-d3/static/oracle-of-bacon1.png)\n\n### Configuring the Renderer\n\nThis section describes experimental rendering configuration.\n\n* `renderer.edgeInterpolate(x)` sets the path interpolation used with d3. For a list of interpolation options, see the [D3 API](https://github.com/mbostock/d3/wiki/SVG-Shapes#wiki-line_interpolate).\n* `renderer.edgeTension(x)` is used to set the tension for use with d3. See the [D3 API](https://github.com/mbostock/d3/wiki/SVG-Shapes#wiki-line_tension) for details.\n\nFor example, to set the edge interpolation to 'linear':\n\n```js\nrenderer.edgeTension('linear');\nrenderer.run(g, d3.select('svg g'));\n```\n\n### Configuring the Layout\n\nHere are a few methods you can call on the layout object to change layout behavior:\n\n* `debugLevel(x)` sets the level of logging verbosity to the number `x`. Currently 4 is th max.\n* `nodeSep(x)` sets the separation between adjacent nodes in the same rank to `x` pixels.\n* `edgeSep(x)` sets the separation between adjacent edges in the same rank to `x` pixels.\n* `rankSep(x)` sets the sepration between ranks in the layout to `x` pixels.\n* `rankDir(x)` sets the direction of the layout.\n    * Defaults to `\"TB\"` for top-to-bottom layout\n    * `\"LR\"` sets layout to left-to-right\n\nFor example, to set node separation to 20 pixels and the rank direction to left-to-right:\n\n```js\nvar layout = dagreD3.layout()\n                    .nodeSep(20)\n                    .rankDir(\"LR\");\nrenderer.layout(layout).run(g, d3.select(\"svg g\"));\n```\n\nThis produces the following graph:\n\n![oracle-of-bacon2.png](http://cpettitt.github.io/project/dagre-d3/static/oracle-of-bacon2.png)\n\n##ReactiveDagre\n\nThe class added in this implementation for Meteor is `ReactiveDagre`. It automatically re-renders the layout with transitions when you add nodes, and wraps a lot of the init phases. Future support is planned for reactive functions in the data, for example, basing a graph off of a traditional Meteor function.\n\nRight now, this is the simplified initialization process:\n\n```coffee\n\ng = new ReactiveDagre \"svg g\"\n\ngraphBuilt = false\nbuildGraph = -\u003e\n   if !graphBuilt\n      graphBuilt = true\n      g.layout.nodeSep(20).rankDir(\"LR\")\n      #Third option is no-render, if you don't want the graph to update immediately\n      g.addNode \"cool\", {label: \"Something Cool\"}, true\n      g.addNode \"awesome\", {label: \"Something Awesome\"}, true\n      g.addEdge null, \"cool\", \"awesome\", {label: \"Leads To\"}, true\n\nTemplate.dagre.rendered = -\u003e\n   buildGraph()\n   g.render()\n\n```\n\nOnce the graph is initially rendered, if you call `g.addNode` or `g.addEdge`, the graph will update automatically, with a nice 500ms transition. You can override the transition function by overwriting `ReactiveDagre.prototype.transition`.\n\nYou can also remove edges or nodes by ID using `g.delNode` or `g.delEdge`.\n\nPlease note that you're setting basically an HTML selector in the constructor of `ReactiveDagre`. If you try to add nodes when Meteor hasn't yet rendered your base `svg g`, it will throw errors. It is safe to constuct `ReactiveDagre` without any DOM, however.\n\n## License\n\ndagre-d3 is licensed under the terms of the MIT License. See the LICENSE file\nfor details.\n\n[npm package manager]: http://npmjs.org/\n[D3]: https://github.com/mbostock/d3\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fparalin%2Fmeteor-dagre-d3","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fparalin%2Fmeteor-dagre-d3","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fparalin%2Fmeteor-dagre-d3/lists"}