var force = d3.layout.force()
    .charge(-1050)
    .linkDistance(w/6.5)
    .size([w, h]);


d3.json("force.json", function(error, graph) {
  force
      .nodes(graph.nodes)
      .links(graph.links)
      .start();

  var link = svg.selectAll(".link")
      .data(graph.links)
    .enter().append("line")
      .attr("class", "link")
      .style("stroke-width", function(d) { return 4; });

  var node = svg.append("g").selectAll(".node")
      .data(graph.nodes)
    .enter().append("circle")
      .attr("class", "node")
      .attr("r", function(d) {return d.size*7;})
      .style("fill",function(d) { return "#18bdff"; })
      .style("stroke-width", function(d) {return d.size;})
      .style("stroke", function(d) { return "#E7E7E7"; })
      .call(force.drag);



      var text = svg.append("g").selectAll(".forceText")
   .data(graph.nodes)
   .enter()
   .append("text")
   .attr("x",0)
   .attr("y",".31em")
   .text(function(d) {return d.name;})
   .style("fill","black")
   .style("font-family","snb")
   .style("font-size",function(d) {return d.size*5;})



  force.on("tick", function() {
    link.attr("x1", function(d) { return d.source.x + (2*w); })
        .attr("y1", function(d) { return d.source.y })
        .attr("x2", function(d) { return d.target.x+ (2*w); })
        .attr("y2", function(d) { return d.target.y; });

    node.attr("cx", function(d) { return d.x + (2*w); })
        .attr("cy", function(d) { return d.y ; });


        text.attr("x", function(d) { return d.x+ (2*w)-(4*d.size); })
        .attr("y", function(d) { return d.y+(d.size*2); })
  });
});