將Dagre-D3與流星一起使用

Question

我正在嘗試使用Dagre-D3創建一個簡單的有向圖，該圖從文本輸入中添加節點。

不幸的是，該圖形只是拒絕繪制..我認為這是因為我的“ Nodes.find（{}）。forEach（function（n）{...”）似乎沒有運行。

有什么想法可能有問題嗎？ 我使用dagre-d3或流星錯誤嗎？ 感謝您的幫助！

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與流星一起使用

問題描述

1 個解決方案

解決方案1
0 已采納 2016-06-14 12:08:11

將Dagre-D3與流星一起使用

問題描述

1 個解決方案

解決方案1 0 已采納 2016-06-14 12:08:11

解決方案1
0 已采納 2016-06-14 12:08:11