dynamically generate circles

8 years ago · 1459f4cd11
parent 282ced9f8a
commit 1459f4cd11
2 changed files with 7 additions and 6 deletions
--- a/app.js
+++ b/app.js
@ -30,7 +30,12 @@ yDomain = d3.extent(runs, function(datum, index){
 })
 yScale.domain(yDomain);

-d3.selectAll('circle').data(runs)
+d3.select('svg').selectAll('circle')
+    .data(runs)
+    .enter()
+    .append('circle');
+
+d3.selectAll('circle')
    .attr('cy', function(datum, index){
        return yScale(datum.distance);
    });
--- a/index.html
+++ b/index.html
@ -6,11 +6,7 @@
        <link rel="stylesheet" href="app.css">
    </head>
    <body>
-        <svg>
-            <circle/>
-            <circle/>
-            <circle/>
-        </svg>
+        <svg></svg>
        <script src="https://d3js.org/d3.v4.min.js"></script>
        <script src="app.js" charset="utf-8"></script>
    </body>