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