mahuntington
/
noaa-map
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

converting to v7

Browse Source
main
Matt Huntington 3 years ago
parent 575c1b6e6d
commit 4356e8bbea
2 changed files with 20 additions and 25 deletions
Show Stats Download Patch File Download Diff File

28
app.js
Unescape View File

@ -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();

5
index.html
Unescape View File

@ -3,9 +3,8 @@
<head>
<meta charset="utf-8">
<title></title>
<script src="https://d3js.org/d3.v5.min.js" charset="utf-8"></script>
<!-- this loads the data of the various country boundires -->
<script src="https://cdn.rawgit.com/mahuntington/mapping-demo/master/map_data3.js" charset="utf-8"></script>
<script src="https://d3js.org/d3.v7.min.js" charset="utf-8"></script>
<script src="map_data3.js" charset="utf-8"></script>
</head>
<body>
<svg></svg>

Write Preview
Loading…
Cancel
Save