Fatal编程技术网
  • javascript/
  • Javascript 如何制作流星d3定向力图？

Javascript 如何制作流星d3定向力图？

javascript d3.js meteor

Javascript 如何制作流星d3定向力图？,javascript,d3.js,meteor,Javascript,D3.js,Meteor,尽管我可能会尝试，但当涉及到方向力图时，我似乎无法让meteor和d3很好地发挥作用。因为我对Meteor和d3都是新手，我不确定我的失败在哪里 我试图做的是（重新）创建下面的示例图，但它是对mongo数据源的反应。任何帮助都将不胜感激 以下是我尝试使用parties示例作为起点的尝试： parties.html： <head> <title>All Tomorrow's Parties</title> <meta name="viewpo

尽管我可能会尝试，但当涉及到方向力图时，我似乎无法让meteor和d3很好地发挥作用。因为我对Meteor和d3都是新手，我不确定我的失败在哪里

我试图做的是（重新）创建下面的示例图，但它是对mongo数据源的反应。任何帮助都将不胜感激

以下是我尝试使用parties示例作为起点的尝试：

parties.html：

<head>
  <title>All Tomorrow's Parties</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  {{> page}}
</body>

<template name="page">

          <div class="span6">
            {{> map}}           
          </div>

  {{>updateNetwork}}
</template>

<template name="map">

</template>

<template name="details">
  <div class="details">

  </div>
</template>



<template name="updateNetwork">
<div align="right">
  <br/>
  <input id="addNodeBtn" type="button" value = "Add Some Nodes">
</div>
<div id="svgDiv">
</div>
</template>
以下是使用meteor和Inclusion对我有效的答案：

client.js：

Template.map.rendered = function () {
  var self = this;
  self.node = self.find("svg");

  if (! self.handle) {
    self.handle = Deps.autorun(function () {


if (!Session.equals("alreadyRun", true))
{


_links = Links.find({}).fetch();


// The nodes array just contains name information. 
// Sample values:
// nodes["Jack"] = {name: "Jack"}
// nodes["Jill"]  = {name: "Jill"}

var nodes = {};

// Compute the distinct nodes from the links.
// Go through all links, and update the total weight of the edge as well for each link,
// within the links object.
//
_links.forEach(function(link) {
    link.source = nodes[link.source] || 
        (nodes[link.source] = {name: link.source});
    link.target = nodes[link.target] || 
        (nodes[link.target] = {name: link.target});
    link.value = +link.value;
});

  console.log("links: " + JSON.stringify(_links));

  var links = _links;

// At this point, the "links" object cotains info on the entire network, and
// is prepared to be rendered

var width = 300,
    height = 200;

 force = d3.layout.force();

force
    .nodes(d3.values(nodes))
    .links(links)
    .size([width, height])
    .linkDistance(60)
    .charge(-300)
    .on("tick", tick)
    .start();

Session.set("forceVariable", force);

Session.set("nodeArray", nodes);
//Session.set("linkArray", d3.layout.force().links());
Session.set("linkArray", links);

// Set the range
var  v = d3.scale.linear().range([0, 100]);

// Scale the range of the data
v.domain([0, d3.max(links, function(d) { return d.value; })]);

// asign a type per value to encode opacity
links.forEach(function(link) {
  if (v(link.value) <= 25) {
    link.type = "twofive";
  } else if (v(link.value) <= 50 && v(link.value) > 25) {
    link.type = "fivezero";
  } else if (v(link.value) <= 75 && v(link.value) > 50) {
    link.type = "sevenfive";
  } else if (v(link.value) <= 100 && v(link.value) > 75) {
    link.type = "onezerozero";
  }
});

var svg = d3.select("body").select("#svgDiv").append("svg")
    .attr("width", width)
    .attr("height", height);

//Session.set("currentSVG", svg);

// build the arrow.
svg.append("svg:defs").selectAll("marker")
    .data(["end"])      // Different link/path types can be defined here
  .enter().append("svg:marker")    // This section adds in the arrows
    .attr("id", String)
    .attr("viewBox", "0 -5 10 10")
    .attr("refX", 15)
    .attr("refY", -1.5)
    .attr("markerWidth", 6)
    .attr("markerHeight", 6)
    .attr("orient", "auto")
  .append("svg:path")
    .attr("d", "M0,-5L10,0L0,5");

// add the links and the arrows
var path = svg.append("svg:g").selectAll("path")
    .data(force.links())
  .enter().append("svg:path")
    .attr("class", function(d) { return "link " + d.type; })
    .attr("marker-end", "url(#end)");


console.log("At this point, force.nodes() is..." + JSON.stringify(force.nodes()));

// define the nodes
var node = svg.selectAll(".node")
    .data(force.nodes())  
  .enter().append("g")
    .attr("class", "node")
    .on("click", click)
    .on("dblclick", dblclick)
    .call(force.drag);


console.log("And now, at this point, force.nodes() is..." + JSON.stringify(force.nodes()));

// add the nodes
node.append("circle")
    .attr("r", 5);

// add the text 
node.append("text")
    .attr("x", 12)
    .attr("dy", ".35em")
    .text(function(d) { return d.name; });


  } // end if (Session.equals("alreadyRun", true))
else
{


console.log("nodeArrray: " + JSON.stringify(Session.get("nodeArray")));
  console.log("linkArray:" + Session.get("linkArray"));
  //console.log("currentSVG: " + JSON.stringify(Session.get("currentSVG")));
  //console.log("currentNodes: " + JSON.stringify(Session.get("currentSVG").nodes()));



// Session.set("nodeArray", nodes);
// Session.set("linkArray", d3.layout.force().links());



var svg = d3.select("body").select("#svgDiv").select("svg");
//var svg = Session.get("currentSVG");


// Try to access the force.nodes() object
//
//console.log("force.nodes: "+ JSON.stringify(svg.selectAll(".node").data(Session.get();)));




// build the arrow.
svg.append("svg:defs").selectAll("marker")
    .data(["end"])      // Different link/path types can be defined here
  .enter().append("svg:marker")    // This section adds in the arrows
    .attr("id", String)
    .attr("viewBox", "0 -5 10 10")
    .attr("refX", 15)
    .attr("refY", -1.5)
    .attr("markerWidth", 6)
    .attr("markerHeight", 6)
    .attr("orient", "auto")
  .append("svg:path")
    .attr("d", "M0,-5L10,0L0,5");

newNodes = Session.get("nodeArray");
newLinks = Session.get("linkArray");

newLinks.push({source:"Kobeeley" , target:"Cluff", value:0.8});

newLinks.forEach(function(link) {
    link.source = newNodes[link.source] || 
        (newNodes[link.source] = {name: link.source});
    link.target = newNodes[link.target] || 
        (newNodes[link.target] = {name: link.target});
    link.value = +link.value;
});

console.log("newNodes is now...." + JSON.stringify(newNodes));

//var force = d3.layout.force();

// add the links and the arrows
var path = svg.append("svg:g").selectAll("path")
    .data(newLinks)
  .enter().append("svg:path")
    .attr("class", function(d) { return "link " + d.type; })
    .attr("marker-end", "url(#end)");

// define the nodes
var node = svg.selectAll(".node")
    .data(d3.values(newNodes))
  .enter().append("g")
    .attr("class", "node")
    .call(force.drag);

 //   .on("click", click)
 //   .on("dblclick", dblclick)
 //   .call(force.drag);

// add the nodes
node.append("circle")
    .attr("r", 5);

// add the text 
node.append("text")
    .attr("x", 12)
    .attr("dy", ".35em")
    .text(function(d) { return d.name; });

    var width = 960,
    height = 500;


force.start();

/*
force
    .nodes(d3.values(newNodes))
    .links(newLinks)
    .size([width, height])
    .linkDistance(60)
    .charge(-300)
    .on("tick", tick)

   .start();
*/
/*
var force = d3.layout.force()
    .nodes(d3.values(newNodes))
    .links(newLinks)
    .size([width, height])
    .linkDistance(60)
    .charge(-300)
    .on("tick", tick)
    .start();
*/

} // end of if..else firstrun

// add the curvy lines
function tick() {
    path.attr("d", function(d) {
        var dx = d.target.x - d.source.x,
            dy = d.target.y - d.source.y,
            dr = Math.sqrt(dx * dx + dy * dy);
        return "M" + 
            d.source.x + "," + 
            d.source.y + "A" + 
            dr + "," + dr + " 0 0,1 " + 
            d.target.x + "," + 
            d.target.y;
    });

    node
        .attr("transform", function(d) { 
        return "translate(" + d.x + "," + d.y + ")"; });
}

// action to take on mouse click
function click() {
    d3.select(this).select("text").transition()
        .duration(750)
        .attr("x", 22)
        .style("fill", "steelblue")
        .style("stroke", "lightsteelblue")
        .style("stroke-width", ".5px")
        .style("font", "20px sans-serif");
    d3.select(this).select("circle").transition()
        .duration(750)
        .attr("r", 16)
        .style("fill", "lightsteelblue");

}

// action to take on mouse double click
function dblclick() {
    d3.select(this).select("circle").transition()
        .duration(750)
        .attr("r", 6)
        .style("fill", "#ccc");
    d3.select(this).select("text").transition()
        .duration(750)
        .attr("x", 12)
        .style("stroke", "none")
        .style("fill", "black")
        .style("stroke", "none")
        .style("font", "10px sans-serif");
    }




});  // End of deps.autorun function


}// end of (! self.handle)

};// end of Template.map.rendered



Template.updateNetwork.events({
  'click #addNodeBtn': function (event, template) {
    //if (! Meteor.userId()) // must be logged in to create events
    //  return;
    //var coords = coordsRelativeToElement(event.currentTarget, event);
    //openCreateDialog(coords.x / 500, coords.y / 500);



  var _linksToAdd = [
    {source: "Sully", target: "Roy", value: 0.2 },
    {source: "Roy", target: "Jack", value: 0.8},
    {source:"Juhuff", target: "Cluff", value: 0.9}
    ];

    Session.set("alreadyRun", true);

  // Update the collection
  //
  _linksToAdd.forEach(function (link) {
    Links.insert(link);
  })



  }
});

Things = new Meteor.Collection("things");
Links = new Meteor.Collection("links");

if (Meteor.isClient) {
  Template.diagram.rendered = function () {
    var graph;
    graph = new myGraph("#svgdiv");
    Things.find().observe({
      added: function (doc) {
        graph.addNode(doc._id);
      },
      removed: function (doc) {
        graph.removeNode(doc._id);
      }
    });

    Links.find().observe({
      added: function (doc) {
        graph.addLink(doc._id, doc.source, doc.target, doc.value);
      },
      removed: function (doc) {
        graph.removeLink(doc._id);
      }
    });
  };
}

function myGraph(el) {

  // Add and remove elements on the graph object
  this.addNode = function (id) {
    nodes.push({"id":id});
    update();
  };

  this.removeNode = function (id) {
    var i = 0;
    var n = findNode(id);
    while (i < links.length) {
      if ((links[i]['source'] == n)||(links[i]['target'] == n))
        {
          links.splice(i,1);
        }
        else i++;
    }
    nodes.splice(findNodeIndex(id),1);
    update();
  };

  this.removeLink = function (id){
    for(var i=0;i<links.length;i++)
    {
      if(links[i].id === id)
        {
          links.splice(i,1);
          break;
        }
    }
    update();
  };

  this.removeallLinks = function(){
    links.splice(0,links.length);
    update();
  };

  this.removeAllNodes = function(){
    nodes.splice(0,links.length);
    update();
  };

  this.addLink = function (id, source, target, value) {
    links.push({id: id, "source":findNode(source),"target":findNode(target),"value":value});
    update();
  };

  var findNode = function(id) {
    for (var i in nodes) {
      if (nodes[i]["id"] === id) return nodes[i];};
  };

  var findNodeIndex = function(id) {
    for (var i=0;i<nodes.length;i++) {
      if (nodes[i].id==id){
        return i;
      }
    };
  };

  // set up the D3 visualisation in the specified element
  var w = 500,
  h = 500;
  var svg = d3.select(el)
    .append("svg:svg")
    .attr("width", w)
    .attr("height", h)
    .attr("id","svg")
    .attr("pointer-events", "all")
    .attr("viewBox","0 0 "+w+" "+h)
    .attr("perserveAspectRatio","xMinYMid");
  var vis = svg.append('svg:g');

  var force = d3.layout.force();

  var nodes = force.nodes(),
  links = force.links();

  // build the arrow.
  svg.append("svg:defs").selectAll("marker")
      .data(["end"])      // Different link/path types can be defined here
    .enter().append("svg:marker")    // This section adds in the arrows
      .attr("id", String)
      .attr("viewBox", "0 -5 10 10")
      .attr("refX", 15)
      .attr("refY", -1.5)
      .attr("markerWidth", 6)
      .attr("markerHeight", 6)
      .attr("orient", "auto")
    .append("svg:path")
      .attr("d", "M0,-5L10,0L0,5");

  var update = function () {
    var link = vis.selectAll("path")
      .data(links, function(d) {
        return d.id;
      });

    link.enter().append("svg:path")
      .attr("id",function(d){return d.id;})
      .attr("class","link")
      .attr("marker-end", "url(#end)");

    link.append("title")
      .text(function(d){
        return d.value;
      });

    link.exit().remove();

    var node = vis.selectAll("g.node")
    .data(nodes, function(d) { return d.id;});

    var nodeEnter = node.enter().append("g")
      .attr("class", "node")
      .call(force.drag);

    nodeEnter.append("svg:circle")
      .attr("r", 16)
      .attr("id",function(d) { return "Node;"+d.id;})
      .attr("class","nodeStrokeClass");

    nodeEnter.append("svg:text")
      .attr("class","textClass")
      .text( function(d){return d.id;}) ;

    node.exit().remove();

    force.on("tick", function() {
      node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y         + ")"; });

      link.attr("d", function(d) {
          var dx = d.target.x - d.source.x,
              dy = d.target.y - d.source.y,
              dr = Math.sqrt(dx * dx + dy * dy);
          return "M" + 
              d.source.x + "," + 
              d.source.y + "A" + 
              dr + "," + dr + " 0 0,1 " + 
              d.target.x + "," + 
              d.target.y;
      });

    });

      // Restart the force layout.
      force
        .gravity(.05)
        .distance(50)
        .linkDistance( 50 )
        .size([w, h])
        .start();
  };


  // Make it all go
  update();
}

Things=newmeteor.Collection（“Things”）；
链接=新流星收藏（“链接”）；
if（Meteor.isClient）{
Template.diagram.rendered=函数（）{
var图；
图形=新的myGraph（“#svgdiv”）；
事物。发现（）。观察({
新增：功能（doc）{
graph.addNode（文档id）；
},
删除：功能（文档）{
图.removeNode（文件编号）；
}
});
Links.find（）。观察({
新增：功能（doc）{
graph.addLink（单据号、单据源、单据目标、单据值）；
},
删除：功能（文档）{
图形removeLink（文档id）；
}
});
};
}
函数图（el）{
//在图形对象上添加和删除元素
this.addNode=函数（id）{
nodes.push（{“id”：id}）；
更新（）；
};
this.removeNode=函数（id）{
var i=0；
var n=findNode（id）；
而（i对于（var i=0；我为什么不继续尝试呢？您当前的代码甚至没有使用meteor作为数据源。感谢Christian的建议-我的代码有点长，感觉太复杂了，所以我没有发布它来为我试图解决的情况留下更清晰的表示空间。尽管您提出了要求，我还是继续编辑现在的问题，再次感谢你的帮助哦，来吧！请过滤掉所有与这个问题无关的不必要的东西。我们正在尝试帮助，但你并没有真正让它变得容易。克里斯蒂安，感谢你尝试帮助。老实说，如果我有专业知识，甚至开始告诉你哪些部分是相关的，哪些是不相关的，我会的我很高兴能适当地把问题删掉，也许我甚至不会陷入困境。我认为你需要这个问题的地方和我能提供的东西之间的差距目前太大了。我可以自信地说，因为我最终与a（现在）取得了联系这位朋友实际上是meteor的核心开发者之一。他认为从头开始会容易得多，并很快让它开始工作。

Template.map.rendered = function () {
  var self = this;
  self.node = self.find("svg");

  if (! self.handle) {
    self.handle = Deps.autorun(function () {


if (!Session.equals("alreadyRun", true))
{


_links = Links.find({}).fetch();


// The nodes array just contains name information. 
// Sample values:
// nodes["Jack"] = {name: "Jack"}
// nodes["Jill"]  = {name: "Jill"}

var nodes = {};

// Compute the distinct nodes from the links.
// Go through all links, and update the total weight of the edge as well for each link,
// within the links object.
//
_links.forEach(function(link) {
    link.source = nodes[link.source] || 
        (nodes[link.source] = {name: link.source});
    link.target = nodes[link.target] || 
        (nodes[link.target] = {name: link.target});
    link.value = +link.value;
});

  console.log("links: " + JSON.stringify(_links));

  var links = _links;

// At this point, the "links" object cotains info on the entire network, and
// is prepared to be rendered

var width = 300,
    height = 200;

 force = d3.layout.force();

force
    .nodes(d3.values(nodes))
    .links(links)
    .size([width, height])
    .linkDistance(60)
    .charge(-300)
    .on("tick", tick)
    .start();

Session.set("forceVariable", force);

Session.set("nodeArray", nodes);
//Session.set("linkArray", d3.layout.force().links());
Session.set("linkArray", links);

// Set the range
var  v = d3.scale.linear().range([0, 100]);

// Scale the range of the data
v.domain([0, d3.max(links, function(d) { return d.value; })]);

// asign a type per value to encode opacity
links.forEach(function(link) {
  if (v(link.value) <= 25) {
    link.type = "twofive";
  } else if (v(link.value) <= 50 && v(link.value) > 25) {
    link.type = "fivezero";
  } else if (v(link.value) <= 75 && v(link.value) > 50) {
    link.type = "sevenfive";
  } else if (v(link.value) <= 100 && v(link.value) > 75) {
    link.type = "onezerozero";
  }
});

var svg = d3.select("body").select("#svgDiv").append("svg")
    .attr("width", width)
    .attr("height", height);

//Session.set("currentSVG", svg);

// build the arrow.
svg.append("svg:defs").selectAll("marker")
    .data(["end"])      // Different link/path types can be defined here
  .enter().append("svg:marker")    // This section adds in the arrows
    .attr("id", String)
    .attr("viewBox", "0 -5 10 10")
    .attr("refX", 15)
    .attr("refY", -1.5)
    .attr("markerWidth", 6)
    .attr("markerHeight", 6)
    .attr("orient", "auto")
  .append("svg:path")
    .attr("d", "M0,-5L10,0L0,5");

// add the links and the arrows
var path = svg.append("svg:g").selectAll("path")
    .data(force.links())
  .enter().append("svg:path")
    .attr("class", function(d) { return "link " + d.type; })
    .attr("marker-end", "url(#end)");


console.log("At this point, force.nodes() is..." + JSON.stringify(force.nodes()));

// define the nodes
var node = svg.selectAll(".node")
    .data(force.nodes())  
  .enter().append("g")
    .attr("class", "node")
    .on("click", click)
    .on("dblclick", dblclick)
    .call(force.drag);


console.log("And now, at this point, force.nodes() is..." + JSON.stringify(force.nodes()));

// add the nodes
node.append("circle")
    .attr("r", 5);

// add the text 
node.append("text")
    .attr("x", 12)
    .attr("dy", ".35em")
    .text(function(d) { return d.name; });


  } // end if (Session.equals("alreadyRun", true))
else
{


console.log("nodeArrray: " + JSON.stringify(Session.get("nodeArray")));
  console.log("linkArray:" + Session.get("linkArray"));
  //console.log("currentSVG: " + JSON.stringify(Session.get("currentSVG")));
  //console.log("currentNodes: " + JSON.stringify(Session.get("currentSVG").nodes()));



// Session.set("nodeArray", nodes);
// Session.set("linkArray", d3.layout.force().links());



var svg = d3.select("body").select("#svgDiv").select("svg");
//var svg = Session.get("currentSVG");


// Try to access the force.nodes() object
//
//console.log("force.nodes: "+ JSON.stringify(svg.selectAll(".node").data(Session.get();)));




// build the arrow.
svg.append("svg:defs").selectAll("marker")
    .data(["end"])      // Different link/path types can be defined here
  .enter().append("svg:marker")    // This section adds in the arrows
    .attr("id", String)
    .attr("viewBox", "0 -5 10 10")
    .attr("refX", 15)
    .attr("refY", -1.5)
    .attr("markerWidth", 6)
    .attr("markerHeight", 6)
    .attr("orient", "auto")
  .append("svg:path")
    .attr("d", "M0,-5L10,0L0,5");

newNodes = Session.get("nodeArray");
newLinks = Session.get("linkArray");

newLinks.push({source:"Kobeeley" , target:"Cluff", value:0.8});

newLinks.forEach(function(link) {
    link.source = newNodes[link.source] || 
        (newNodes[link.source] = {name: link.source});
    link.target = newNodes[link.target] || 
        (newNodes[link.target] = {name: link.target});
    link.value = +link.value;
});

console.log("newNodes is now...." + JSON.stringify(newNodes));

//var force = d3.layout.force();

// add the links and the arrows
var path = svg.append("svg:g").selectAll("path")
    .data(newLinks)
  .enter().append("svg:path")
    .attr("class", function(d) { return "link " + d.type; })
    .attr("marker-end", "url(#end)");

// define the nodes
var node = svg.selectAll(".node")
    .data(d3.values(newNodes))
  .enter().append("g")
    .attr("class", "node")
    .call(force.drag);

 //   .on("click", click)
 //   .on("dblclick", dblclick)
 //   .call(force.drag);

// add the nodes
node.append("circle")
    .attr("r", 5);

// add the text 
node.append("text")
    .attr("x", 12)
    .attr("dy", ".35em")
    .text(function(d) { return d.name; });

    var width = 960,
    height = 500;


force.start();

/*
force
    .nodes(d3.values(newNodes))
    .links(newLinks)
    .size([width, height])
    .linkDistance(60)
    .charge(-300)
    .on("tick", tick)

   .start();
*/
/*
var force = d3.layout.force()
    .nodes(d3.values(newNodes))
    .links(newLinks)
    .size([width, height])
    .linkDistance(60)
    .charge(-300)
    .on("tick", tick)
    .start();
*/

} // end of if..else firstrun

// add the curvy lines
function tick() {
    path.attr("d", function(d) {
        var dx = d.target.x - d.source.x,
            dy = d.target.y - d.source.y,
            dr = Math.sqrt(dx * dx + dy * dy);
        return "M" + 
            d.source.x + "," + 
            d.source.y + "A" + 
            dr + "," + dr + " 0 0,1 " + 
            d.target.x + "," + 
            d.target.y;
    });

    node
        .attr("transform", function(d) { 
        return "translate(" + d.x + "," + d.y + ")"; });
}

// action to take on mouse click
function click() {
    d3.select(this).select("text").transition()
        .duration(750)
        .attr("x", 22)
        .style("fill", "steelblue")
        .style("stroke", "lightsteelblue")
        .style("stroke-width", ".5px")
        .style("font", "20px sans-serif");
    d3.select(this).select("circle").transition()
        .duration(750)
        .attr("r", 16)
        .style("fill", "lightsteelblue");

}

// action to take on mouse double click
function dblclick() {
    d3.select(this).select("circle").transition()
        .duration(750)
        .attr("r", 6)
        .style("fill", "#ccc");
    d3.select(this).select("text").transition()
        .duration(750)
        .attr("x", 12)
        .style("stroke", "none")
        .style("fill", "black")
        .style("stroke", "none")
        .style("font", "10px sans-serif");
    }




});  // End of deps.autorun function


}// end of (! self.handle)

};// end of Template.map.rendered



Template.updateNetwork.events({
  'click #addNodeBtn': function (event, template) {
    //if (! Meteor.userId()) // must be logged in to create events
    //  return;
    //var coords = coordsRelativeToElement(event.currentTarget, event);
    //openCreateDialog(coords.x / 500, coords.y / 500);



  var _linksToAdd = [
    {source: "Sully", target: "Roy", value: 0.2 },
    {source: "Roy", target: "Jack", value: 0.8},
    {source:"Juhuff", target: "Cluff", value: 0.9}
    ];

    Session.set("alreadyRun", true);

  // Update the collection
  //
  _linksToAdd.forEach(function (link) {
    Links.insert(link);
  })



  }
});



Links = new Meteor.Collection("links");

Links.allow({
  insert: function (userId, doc) {
    return true; // no cowboy inserts -- use createParty method
  },
  update: function (userId, doc, fields, modifier) {
  //  if (userId !== party.owner)
  //    return true; // not the owner

  //  var allowed = ["title", "description", "x", "y"];
  //  if (_.difference(fields, allowed).length)
  //    return true; // tried to write to forbidden field

    // A good improvement would be to validate the type of the new
    // value of the field (and if a string, the length.) In the
    // future Meteor will have a schema system to makes that easier.
    return true;
  },
  remove: function (userId, doc) {
    // You can only remove parties that you created and nobody is going to.
  //  return party.owner === userId && attending(party) === 0;
  return true;
  }

});



Things = new Meteor.Collection("things");
Links = new Meteor.Collection("links");

if (Meteor.isClient) {
  Template.diagram.rendered = function () {
    var graph;
    graph = new myGraph("#svgdiv");
    Things.find().observe({
      added: function (doc) {
        graph.addNode(doc._id);
      },
      removed: function (doc) {
        graph.removeNode(doc._id);
      }
    });

    Links.find().observe({
      added: function (doc) {
        graph.addLink(doc._id, doc.source, doc.target, doc.value);
      },
      removed: function (doc) {
        graph.removeLink(doc._id);
      }
    });
  };
}

function myGraph(el) {

  // Add and remove elements on the graph object
  this.addNode = function (id) {
    nodes.push({"id":id});
    update();
  };

  this.removeNode = function (id) {
    var i = 0;
    var n = findNode(id);
    while (i < links.length) {
      if ((links[i]['source'] == n)||(links[i]['target'] == n))
        {
          links.splice(i,1);
        }
        else i++;
    }
    nodes.splice(findNodeIndex(id),1);
    update();
  };

  this.removeLink = function (id){
    for(var i=0;i<links.length;i++)
    {
      if(links[i].id === id)
        {
          links.splice(i,1);
          break;
        }
    }
    update();
  };

  this.removeallLinks = function(){
    links.splice(0,links.length);
    update();
  };

  this.removeAllNodes = function(){
    nodes.splice(0,links.length);
    update();
  };

  this.addLink = function (id, source, target, value) {
    links.push({id: id, "source":findNode(source),"target":findNode(target),"value":value});
    update();
  };

  var findNode = function(id) {
    for (var i in nodes) {
      if (nodes[i]["id"] === id) return nodes[i];};
  };

  var findNodeIndex = function(id) {
    for (var i=0;i<nodes.length;i++) {
      if (nodes[i].id==id){
        return i;
      }
    };
  };

  // set up the D3 visualisation in the specified element
  var w = 500,
  h = 500;
  var svg = d3.select(el)
    .append("svg:svg")
    .attr("width", w)
    .attr("height", h)
    .attr("id","svg")
    .attr("pointer-events", "all")
    .attr("viewBox","0 0 "+w+" "+h)
    .attr("perserveAspectRatio","xMinYMid");
  var vis = svg.append('svg:g');

  var force = d3.layout.force();

  var nodes = force.nodes(),
  links = force.links();

  // build the arrow.
  svg.append("svg:defs").selectAll("marker")
      .data(["end"])      // Different link/path types can be defined here
    .enter().append("svg:marker")    // This section adds in the arrows
      .attr("id", String)
      .attr("viewBox", "0 -5 10 10")
      .attr("refX", 15)
      .attr("refY", -1.5)
      .attr("markerWidth", 6)
      .attr("markerHeight", 6)
      .attr("orient", "auto")
    .append("svg:path")
      .attr("d", "M0,-5L10,0L0,5");

  var update = function () {
    var link = vis.selectAll("path")
      .data(links, function(d) {
        return d.id;
      });

    link.enter().append("svg:path")
      .attr("id",function(d){return d.id;})
      .attr("class","link")
      .attr("marker-end", "url(#end)");

    link.append("title")
      .text(function(d){
        return d.value;
      });

    link.exit().remove();

    var node = vis.selectAll("g.node")
    .data(nodes, function(d) { return d.id;});

    var nodeEnter = node.enter().append("g")
      .attr("class", "node")
      .call(force.drag);

    nodeEnter.append("svg:circle")
      .attr("r", 16)
      .attr("id",function(d) { return "Node;"+d.id;})
      .attr("class","nodeStrokeClass");

    nodeEnter.append("svg:text")
      .attr("class","textClass")
      .text( function(d){return d.id;}) ;

    node.exit().remove();

    force.on("tick", function() {
      node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y         + ")"; });

      link.attr("d", function(d) {
          var dx = d.target.x - d.source.x,
              dy = d.target.y - d.source.y,
              dr = Math.sqrt(dx * dx + dy * dy);
          return "M" + 
              d.source.x + "," + 
              d.source.y + "A" + 
              dr + "," + dr + " 0 0,1 " + 
              d.target.x + "," + 
              d.target.y;
      });

    });

      // Restart the force layout.
      force
        .gravity(.05)
        .distance(50)
        .linkDistance( 50 )
        .size([w, h])
        .start();
  };


  // Make it all go
  update();
}



<body>
  {{> diagram}}
</body>

<template name="diagram">
  {{#constant}}
    <div id="svgdiv"></div>
  {{/constant}}
</template>