使用Dagre-D3和Meteor
使用Dagre-D3和Meteor
提问于 2016-06-14 00:16:52
我试图使用Dagre-D3创建一个简单的有向图，从文本输入中添加节点。
不幸的是，这张图拒绝画..。我认为这是因为我的“Nodes.find({}).forEach(函数(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
});回答 1
Stack Overflow用户
回答已采纳
发布于 2016-06-14 12:08:11
弄明白了..。数据库根本没有加载呈现。因此，我添加了一个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);
}
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37801077
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号