hello-force-layout

forked from sxywu's block: Metis Class 7, #1

<!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 width = 500;
    var height = 500;
    var radius = 10;
    var colors = d3.scaleOrdinal(d3.schemePastel1);
    var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height);
    
		d3.json('miserables.json', function(err, data) {
      console.log(data);
      var lines = svg.selectAll("line")
      	.data(data.links)
        .enter().append("line")
        .attr("stroke", '#bbb');
      var circles = svg.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) });
      
      // 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 });
          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 });
        });
      
    });
  </script>
</body>

https://d3js.org/d3.v4.min.js

https://d3js.org/d3-scale-chromatic.v1.min.js