adding nodes with data and spacing

8 years ago · b415ac03b0
parent 970b221593
commit b415ac03b0
3 changed files with 32 additions and 1 deletions
--- a/app.css
+++ b/app.css
@ -0,0 +1,4 @@
 circle {
    fill:red;
    r: 5;
 }
--- a/app.js
+++ b/app.js
@ -4,3 +4,27 @@ var HEIGHT = 200;
 d3.select("svg")
    .attr("width", WIDTH)
    .attr("height", HEIGHT);
 var nodesData =  [
    {"name": "Travis", "sex": "M"},
    {"name": "Rake", "sex": "M"},
    {"name": "Diana", "sex": "F"},
    {"name": "Rachel", "sex": "F"},
    {"name": "Shawn", "sex": "M"},
    {"name": "Emerald", "sex": "F"}
 ];
 var nodes = d3.select("g")
        .selectAll("circle")
        .data(nodesData)
        .enter()
        .append("circle");
 d3.forceSimulation()
    .nodes(nodesData)
    .force("charge_force", d3.forceManyBody())
    .force("center_force", d3.forceCenter(WIDTH / 2, HEIGHT / 2)) //position centering force at center x,y coords
    .on("tick", function(){
        nodes.attr("cx", function(d) { return d.x; })
            .attr("cy", function(d) { return d.y; });
    });
--- a/index.html
+++ b/index.html
@ -3,10 +3,13 @@
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="app.css">
        <script src="https://d3js.org/d3.v4.min.js"></script>
    </head>
    <body>
-        <svg></svg>
+        <svg>
            <g></g>
        </svg>
        <script src="app.js" charset="utf-8"></script>
    </body>
 </html>