Search code examples
meteord3.jsdagre-d3

Using Dagre-D3 with Meteor

I'm trying to use Dagre-D3 to create a simple directed graph that adds nodes from a text input.

Unfortunately, the graph just refuses to draw.. and I think it's because my "Nodes.find({}).forEach(function (n) {..." doesn't appear to run.

Any ideas on what might be wrong? Am I using dagre-d3 or meteor wrongly..? Thank you for the help!

main.html: 

<body>
  <div id = "mapspace">
    {{> map}}
  </div>
  <div id = "gennodespace">
    {{>gennode}}
  </div>
</body>

<template name="map">
  <div>
    <svg id="svg-canvas" width=650 height=680></svg>
  </div>
</template>

<template name = "gennode">
  <form class="node-entry">
    <input type="text" name="nodedesc" placeholder="Enter a node title">
  </form>
</template>

main.js -- client:

    import { Template } from 'meteor/templating';
    import { ReactiveVar } from 'meteor/reactive-var';

    import './main.html';

    Nodes = new Meteor.Collection("nodes");
    Edges = new Meteor.Collection("edges");

    Template.map.rendered = function(){
      var g = new dagreD3.graphlib.Graph()
        .setGraph({})
        .setDefaultEdgeLabel(function () {
          return {};
        });

      // Establish nodes
      Nodes.find({}).forEach(function (n) {
        g.setNode(n.nodeid, {
          label: n.description
        });
      });

      // Establish edges
      Edges.find({}).fetch().forEach(function (e) {
        g.setEdge(e.source, e.target, {
          lineTension: .8,
          lineInterpolate: "bundle"
        });
      });

      var render = new dagreD3.render();
      var svg = d3.select("svg"),
          svgGroup = svg.append("g");
      render(d3.select("svg g"), g);
    }

    Template.gennode.events = ({
      'submit .node-entry': function(event,template){
        event.preventDefault();
        var desc = event.target.nodedesc.value;
        var nodeid = Nodes.find().count();

        // Update Nodes
        Nodes.insert({
            nodeid: nodeid,
            description: desc
          });

        // Update edges
        Edges.insert({
          source: 0, //placeholder for now
          target: nodeid
        });

        // Reset form
        template.find(".node-entry").reset();
        return false;
        }
    });

main.js -- server:

Nodes = new Meteor.Collection("nodes");
Edges = new Meteor.Collection("edges");

import { Meteor } from 'meteor/meteor';

Meteor.startup(() => {
  // code to run on server at startup
});
Solution

  • Figured it out... The database simply hasn't loaded on rendered. so I added a find().observe to wrap around it.

    Nodes.find().observe({
    added: function (){


 // Establish nodes
  Nodes.find({}).forEach(function (n) {
    g.setNode(n.nodeid, {
      label: n.description
    });
  });

  // Establish edges
  Edges.find({}).fetch().forEach(function (e) {
    g.setEdge(e.source, e.target, {
      lineTension: .8,
      lineInterpolate: "bundle"
    });
  });

  var render = new dagreD3.render();
  var svg = d3.select("svg"),
      svgGroup = svg.append("g");
  render(d3.select("svg g"), g);
}
});