유성과 함께 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 사용

답변

관련 문제