|
|
|
|
@ -17,3 +17,28 @@
|
|
|
|
|
- We're going to have a gravitational force at the center of the `svg` that draws all nodes towards it
|
|
|
|
|
- We're going to have forces on each node so that they repel each other
|
|
|
|
|
- We're going to have link forces that connect each of the nodes so that they don't repel each other too much
|
|
|
|
|
|
|
|
|
|
## Set up the HTML
|
|
|
|
|
|
|
|
|
|
Pretty standard, but we'll need two `<g>` elements:
|
|
|
|
|
|
|
|
|
|
- One to contain the nodes (people - circles)
|
|
|
|
|
- One to contain the links (relationships - lines)
|
|
|
|
|
|
|
|
|
|
```html
|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
<title></title>
|
|
|
|
|
<script src="https://d3js.org/d3.v4.min.js"></script>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<svg>
|
|
|
|
|
<g id="nodes"></g>
|
|
|
|
|
<g id="links"></g>
|
|
|
|
|
</svg>
|
|
|
|
|
<script src="app.js" charset="utf-8"></script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
|
|
|
|
```
|
|
|
|
|
|
