better way to hide dots

8 years ago · 55703f5420
parent 5425befd9e
commit 55703f5420
3 changed files with 8 additions and 11 deletions
--- a/app.css
+++ b/app.css
@ -1,9 +1,6 @@
 body {
    margin: 20px 40px;
 }
-#container {
-    overflow: hidden;
-}
 circle {
    r: 5;
    fill: black;
@ -16,7 +13,7 @@ circle:hover {
 circle:active {
    fill: red;
 }
- svg {
+#container {
     overflow: visible;
     margin-bottom: 20px;
     margin-left: 30px;
--- a/app.js
+++ b/app.js
@ -19,7 +19,7 @@ var runs = [
    }
 ]

-d3.select('svg')
+d3.select('#container')
    .style('width', WIDTH)
    .style('height', HEIGHT);

@ -89,14 +89,14 @@ var render = function(){
 render();

 var bottomAxis = d3.axisBottom(xScale);
-d3.select('svg')
+d3.select('#container')
 	.append('g')
    .attr('id', 'x-axis')
 	.call(bottomAxis)
    .attr('transform', 'translate(0,'+HEIGHT+')');

 var leftAxis = d3.axisLeft(yScale);
-d3.select('svg')
+d3.select('#container')
 	.append('g')
    .attr('id', 'y-axis')
 	.call(leftAxis);
@ -114,7 +114,7 @@ var createTable = function(){
 createTable();

 var formatTime = d3.timeFormat("%B%e, %Y at %-I:%M%p");
-d3.select('svg').on('click', function(){
+d3.select('#container').on('click', function(){
    var x = d3.event.offsetX;
 	var y = d3.event.offsetY;

@ -144,4 +144,4 @@ var zoomCallback = function(){
 	d3.select('#y-axis').call(leftAxis.scale(d3.event.transform.rescaleY(yScale)));
 }
 var zoom = d3.zoom().on('zoom', zoomCallback);
-d3.select('svg').call(zoom);
+d3.select('#container').call(zoom);
--- a/index.html
+++ b/index.html
@ -6,11 +6,11 @@
        <link rel="stylesheet" href="app.css">
    </head>
    <body>
-        <div id="container">            
+        <svg id="container">
            <svg>
                <g id="points"></g>
            </svg>
-        </div>
+        </svg>
        <table>
            <thead>
                <tr>