使用Dagre-D3与流星

我试图用Dagre-D3创建一个简单的有向图，该图添加了来自文本输入的节点。使用Dagre-D3与流星

不幸的是，图只是拒绝画..我想这是因为我的 “Nodes.find（{}）的forEach（功能（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 
});

来源

2016-06-14 lyn

想通了......该数据库根本没有装上呈现。所以我添加了一个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); 
} 
});

来源

2016-06-14 12:08:11 lyn

使用Dagre-D3与流星

回答

相关问题