Использование Dagre-D3 с Meteor

Question

Использование Dagre-D3 с Meteor

Я пытаюсь использовать Dagre-D3 для создания простого ориентированного графа, который добавляет узлы из текстового ввода.

К сожалению, график просто отказывается рисовать.. и я думаю, что это потому, что мой "Nodes.find({}). ForEach(function (n) {..." не запускается.

Есть идеи, что может быть не так? Я неправильно использую dagre-d3 или meteor..? Спасибо вам за помощь!

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 - клиент:

    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 - сервер:

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

import { Meteor } from 'meteor/meteor';

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

0

d3.js meteor dagre-d3

Источник

user5552786 14 июн '16 в 00:16

1 ответ

Решение

Другие вопросы по тегам d3.js meteor dagre-d3

user5552786 14 июн '16 в 12:08 2016-06-14 12:08 · Accepted Answer · 2016-06-14 12:08

Разобрался... База данных просто не загружена при визуализации. поэтому я добавил find(). наблюдаю, чтобы обернуть вокруг него.

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);
}
});