diff --git a/app.js b/app.js
index 5854de8..3b39105 100644
--- a/app.js
+++ b/app.js
@@ -18,36 +18,32 @@ var dAttributeFunction = d3.geoPath()
d3.selectAll('path').attr('d', dAttributeFunction);
-d3.selectAll('svg').on('click', function(datum){
- console.log(worldProjection.invert(d3.mouse(this)));
-});
-
var dragBehavior = d3.drag() //create a drag behavior
- .on('start', function(){
+ .on('start', function(event){
d3.select('table tr:nth-child(2) td:first-child')
- .html(worldProjection.invert(d3.mouse(this))[0])
+ .html(worldProjection.invert([event.x, event.y])[0])
d3.select('table tr:nth-child(2) td:last-child')
- .html(worldProjection.invert(d3.mouse(this))[1])
+ .html(worldProjection.invert([event.x, event.y])[1])
d3.selectAll('rect').remove();
d3.select('svg').append('rect')
- .attr('x', d3.mouse(this)[0])
- .attr('y', d3.mouse(this)[1]);
+ .attr('x', event.x)
+ .attr('y', event.y);
})
- .on('drag', function(){
+ .on('drag', function(event){
d3.select('table tr:nth-child(3) td:first-child')
- .html(worldProjection.invert(d3.mouse(this))[0])
+ .html(worldProjection.invert([event.x, event.y])[0])
d3.select('table tr:nth-child(3) td:last-child')
- .html(worldProjection.invert(d3.mouse(this))[1])
+ .html(worldProjection.invert([event.x, event.y])[1])
- d3.select('rect').attr('width', d3.mouse(this)[0]-d3.select('rect').attr('x'))
- d3.select('rect').attr('height', d3.mouse(this)[1]-d3.select('rect').attr('y'))
+ d3.select('rect').attr('width', event.x-d3.select('rect').attr('x'))
+ d3.select('rect').attr('height', event.y-d3.select('rect').attr('y'))
})
d3.select('svg').call(dragBehavior);
-d3.select('form').on('submit', function(){
- d3.event.preventDefault();
+d3.select('form').on('submit', function(event){
+ event.preventDefault();
d3.selectAll('rect').remove();
diff --git a/index.html b/index.html
index e01f6cc..8a24986 100644
--- a/index.html
+++ b/index.html
@@ -1,14 +1,13 @@
-
-
-
-
-
-
-
+
+
+
+
+
+
-
+