mahuntington
/
d3-demo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

better way to hide dots

Browse Source
master
Matt Huntington 8 years ago
parent 5425befd9e
commit 55703f5420
3 changed files with 8 additions and 11 deletions
Show Stats Download Patch File Download Diff File

5
app.css
Unescape View File

@ -1,9 +1,6 @@
body { body {
margin: 20px 40px; margin: 20px 40px;
} }
#container {
overflow: hidden;
}
circle { circle {
r: 5; r: 5;
fill: black; fill: black;
@ -16,7 +13,7 @@ circle:hover {
circle:active { circle:active {
fill: red; fill: red;
} }
svg { #container {
overflow: visible; overflow: visible;
margin-bottom: 20px; margin-bottom: 20px;
margin-left: 30px; margin-left: 30px;

10
app.js
Unescape View File

@ -19,7 +19,7 @@ var runs = [
} }
] ]
d3.select('svg') d3.select('#container')
.style('width', WIDTH) .style('width', WIDTH)
.style('height', HEIGHT); .style('height', HEIGHT);
@ -89,14 +89,14 @@ var render = function(){
render(); render();
var bottomAxis = d3.axisBottom(xScale); var bottomAxis = d3.axisBottom(xScale);
d3.select('svg') d3.select('#container')
.append('g') .append('g')
.attr('id', 'x-axis') .attr('id', 'x-axis')
.call(bottomAxis) .call(bottomAxis)
.attr('transform', 'translate(0,'+HEIGHT+')'); .attr('transform', 'translate(0,'+HEIGHT+')');
var leftAxis = d3.axisLeft(yScale); var leftAxis = d3.axisLeft(yScale);
d3.select('svg') d3.select('#container')
.append('g') .append('g')
.attr('id', 'y-axis') .attr('id', 'y-axis')
.call(leftAxis); .call(leftAxis);
@ -114,7 +114,7 @@ var createTable = function(){
createTable(); createTable();
var formatTime = d3.timeFormat("%B%e, %Y at %-I:%M%p"); 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 x = d3.event.offsetX;
var y = d3.event.offsetY; var y = d3.event.offsetY;
@ -144,4 +144,4 @@ var zoomCallback = function(){
d3.select('#y-axis').call(leftAxis.scale(d3.event.transform.rescaleY(yScale))); d3.select('#y-axis').call(leftAxis.scale(d3.event.transform.rescaleY(yScale)));
} }
var zoom = d3.zoom().on('zoom', zoomCallback); var zoom = d3.zoom().on('zoom', zoomCallback);
d3.select('svg').call(zoom); d3.select('#container').call(zoom);

4
index.html
Unescape View File

@ -6,11 +6,11 @@
<link rel="stylesheet" href="app.css"> <link rel="stylesheet" href="app.css">
</head> </head>
<body> <body>
<div id="container"> <svg id="container">
<svg> <svg>
<g id="points"></g> <g id="points"></g>
</svg> </svg>
</div> </svg>
<table> <table>
<thead> <thead>
<tr> <tr>

Write Preview
Loading…
Cancel
Save