mahuntington
/
runs
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

started zooming

Browse Source
master
Matt Huntington 9 years ago
parent 874e6f1e63
commit 6764bd8f6a
2 changed files with 14 additions and 2 deletions
Show Stats Download Patch File Download Diff File

12
public/js/app.js
Unescape View File

@ -22,7 +22,7 @@ convertXDataPointToVisualPoint.domain([new Date('2016-1-1'), new Date('2017-1-1'
var render = function(){ var render = function(){
d3.json('/runs', function(error, data){ d3.json('/runs', function(error, data){
var circles = d3.select('svg').selectAll('circle').data(data, function(datum){ var circles = d3.select('#points').selectAll('circle').data(data, function(datum){
return datum.id; return datum.id;
}); });
circles.enter() circles.enter()
@ -97,8 +97,18 @@ var leftAxis = d3.axisLeft(convertYDataPointToVisualPoint); //create a left axis
var bottomAxis = d3.axisBottom(convertXDataPointToVisualPoint); //create a left axis based on the yScale var bottomAxis = d3.axisBottom(convertXDataPointToVisualPoint); //create a left axis based on the yScale
d3.select('svg') d3.select('svg')
.append('g') //append a group element .append('g') //append a group element
.attr('id', 'y-axis')
.call(leftAxis); //apply the axis to it .call(leftAxis); //apply the axis to it
d3.select('svg') d3.select('svg')
.append('g') //append a group element .append('g') //append a group element
.attr('id', 'x-axis')
.attr('transform', 'translate(0,'+HEIGHT+')') .attr('transform', 'translate(0,'+HEIGHT+')')
.call(bottomAxis); //apply the axis to it .call(bottomAxis); //apply the axis to it
var zoomCallback = function(){
d3.select('#points').attr("transform", d3.event.transform);
d3.select('#x-axis').call(bottomAxis.scale(d3.event.transform.rescaleX(convertXDataPointToVisualPoint)));
d3.select('#y-axis').call(leftAxis.scale(d3.event.transform.rescaleY(convertYDataPointToVisualPoint)));
}
var zoom = d3.zoom().on('zoom', zoomCallback);
d3.select('svg').call(zoom);

4
views/index.ejs
Unescape View File

@ -5,7 +5,9 @@
</head> </head>
<body> <body>
<h1>Welcome to Run App</h1> <h1>Welcome to Run App</h1>
<svg></svg> <svg>
<g id="points"></g>
</svg>
<script src="https://d3js.org/d3.v4.min.js"></script> <script src="https://d3js.org/d3.v4.min.js"></script>
<script src="/js/app.js"></script> <script src="/js/app.js"></script>
</body> </body>

Write Preview
Loading…
Cancel
Save