You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
70 lines
2.0 KiB
70 lines
2.0 KiB
'use strict';
|
|
|
|
var BuoyAnalysisSvgMap = {
|
|
/**
|
|
*
|
|
*/
|
|
projection: d3.geo.mercator()
|
|
.center([-122, 38])
|
|
.scale(1960)
|
|
.translate([BuoyAnalysisData.mapW / 2, BuoyAnalysisData.mapH / 2]),
|
|
|
|
/**
|
|
*
|
|
*/
|
|
drawMap: function() {
|
|
var path = d3.geo.path().projection(BuoyAnalysisSvgMap.projection);
|
|
|
|
d3.select("svg#map").selectAll('.subunit')
|
|
.data(BuoyAnalysisData.mapJson.features)
|
|
.enter().append('path')
|
|
.attr('d', path)
|
|
.attr('fill', 'khaki')
|
|
.attr('stroke', 'lime');
|
|
},
|
|
|
|
/**
|
|
*
|
|
*/
|
|
drawStations: function() {
|
|
var tmp;
|
|
var station;
|
|
var stations = [];
|
|
|
|
for (var prop in BuoyAnalysisData.stationJson) {
|
|
station = BuoyAnalysisData.stationJson[prop];
|
|
|
|
tmp = BuoyAnalysisSvgMap.projection([station.lon, station.lat]);
|
|
station.x = tmp[0];
|
|
station.y = tmp[1];
|
|
|
|
stations.push(station);
|
|
}
|
|
|
|
d3.select("svg#map").selectAll('.station')
|
|
.data(stations)
|
|
.enter().append('circle')
|
|
.attr('cx', function(d) { return d.x; })
|
|
.attr('cy', function(d) { return d.y; })
|
|
.attr('r', 3)
|
|
.attr('id', function(d) { return 's' + d.id; })
|
|
.attr('fill', '#f00')
|
|
.attr('stroke', '#f00')
|
|
.attr('stroke-width', 5)
|
|
// .on("mouseover", startAnimateDetail)
|
|
// .on("mouseout", stopAnimateDetail)
|
|
},
|
|
|
|
/**
|
|
*
|
|
*/
|
|
drawReticle: function() {
|
|
d3.select("svg#map").append('circle')
|
|
.attr('r', 50)
|
|
.attr('fill', 'rgba(200, 200, 200, 0.5)')
|
|
.attr('stroke', '#f00')
|
|
.attr("transform", "translate(" + 100 + "," + 100 + ")")
|
|
.data([ {"x": 100, "y": 100} ])
|
|
.classed('reticle', true);
|
|
}
|
|
};
|
|
|