D3 Examples - cgv2-proto1-force

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>
<body>
  <script>
    var margin = { top: 0, right: 0, bottom: 0, left: 0 }
    var width = 480 - margin.left - margin.right;
    var height = 500 - margin.top - margin.bottom;
    var radius = 20;
    var colors = d3.scaleOrdinal(d3.schemePastel1);
    var svg1 = d3.select("body").append("svg")
      .attr("id", "svg1")
      .attr("width", width)
      .attr("height", height);
    var svg2 = d3.select("body").append("svg")
      .attr("id", "svg2")
      .attr("width", width)
      .attr("height", height);
​
    d3.json("courses.json", function(err, data) { 
      console.log(data);
      var lines = svg1.selectAll("line")
        .data(data.links)
        .enter().append("line")
        .attr("stroke", "#bbb");
      var circles = svg1.selectAll("circles")
        .data(data.nodes, function(d) { return d.id; })
        .enter().append("circle")
        .attr("r", radius)
        .attr("fill-opacity", 0.75)
        .attr("stroke", "#ccc")
        .attr("fill", function(d) { return colors(d.group); });
​
      var lines2 = svg2.selectAll("line")
        .data(data.links)
        .enter().append("line")
        .attr("stroke", "#bbb");
      var text = svg2.selectAll("text")
        .data(data.nodes, function(d) { return d.id; })
        .enter().append("text")
        .text(function(d) { return d.id; })
        .attr("font-family", "Tahoma, Arial, Verdana")
        .attr("font-size", "12px")
        .attr("fill", "#222")
        .attr("fill-opacity", 0.75)
        .attr("background-color", function(d) { return colors(d.group); });
​
      // define force
      var simulation = d3.forceSimulation(data.nodes)
        .force("center", d3.forceCenter(width / 2, height / 2))
        .force("repulse", d3.forceManyBody())
        .force("link", d3.forceLink(data.links).id(function(d) { return d.id; } ))
        .on("tick", function() {
          circles.attr("cx", function(d) { return d.x; })
            .attr("cy", function(d) { return d.y; });
          text.attr("x", function(d) { return d.x; })
            .attr("y", function(d) { return d.y; });
          lines.attr("x1", function(d) { return d.source.x; })
            .attr("x2", function(d) { return d.target.x; })
            .attr("y1", function(d) { return d.source.y; })
            .attr("y2", function(d) { return d.target.y; });
          lines2.attr("x1", function(d) { return d.source.x; })
            .attr("x2", function(d) { return d.target.x; })
            .attr("y1", function(d) { return d.source.y; })
            .attr("y2", function(d) { return d.target.y; });
        });
    });
  </script>
</body>
    