将 Dagre-D3 与 Meteor 一起使用

Question

我正在尝试使用 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
});

Answer 1

搞清楚了...数据库根本没有在呈现时加载。所以我添加了一个 find().observe 来环绕它。

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

将 Dagre-D3 与 Meteor 一起使用

Using Dagre-D3 with Meteor

meteor

d3.js

dagre-d3