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.
129 lines
3.3 KiB
129 lines
3.3 KiB
'use strict';
|
|
|
|
var BuoyAnalysisBehaviors = {
|
|
/**
|
|
*
|
|
*/
|
|
reticleDrag: function(d) {
|
|
d.x += d3.event.dx;
|
|
d.y += d3.event.dy;
|
|
|
|
d3.select(this).attr("transform", function(d) {
|
|
return "translate(" + [ d.x, d.y ] + ")"
|
|
});
|
|
|
|
BuoyAnalysisMap.findStationsUnderReticle();
|
|
BuoyAnalysisChart.updateColor();
|
|
BuoyAnalysisChart.draw();
|
|
BuoyAnalysisChart3.draw();
|
|
},
|
|
|
|
/**
|
|
*
|
|
*/
|
|
reticleClick: function() {
|
|
if (d3.event.defaultPrevented) {
|
|
return;
|
|
}
|
|
|
|
var d = d3.select('.reticle').data()[0];
|
|
d.x = d3.mouse(this)[0];
|
|
d.y = d3.mouse(this)[1];
|
|
|
|
d3.select('.reticle')
|
|
.attr('transform', 'translate(' + [ d.x, d.y ] + ')')
|
|
|
|
BuoyAnalysisMap.findStationsUnderReticle();
|
|
BuoyAnalysisChart.updateColor();
|
|
BuoyAnalysisChart.draw();
|
|
BuoyAnalysisChart3.draw();
|
|
},
|
|
|
|
/**
|
|
*
|
|
*/
|
|
reticleResize: function() {
|
|
d3.select('.reticle')
|
|
.attr('r', BuoyAnalysisMap.reticle.scale(this.value));
|
|
|
|
BuoyAnalysisMap.findStationsUnderReticle();
|
|
BuoyAnalysisChart.draw();
|
|
BuoyAnalysisChart3.draw();
|
|
},
|
|
|
|
/**
|
|
*
|
|
*/
|
|
barDisplayClick: function(d) {
|
|
var e = d3.select(this);
|
|
|
|
d3.selectAll('.bar-display .toggle').classed('selected', false);
|
|
|
|
e.classed('selected', true);
|
|
|
|
if (e.classed('toggle1')) {
|
|
BuoyAnalysisChart.bars.showYears = true;
|
|
BuoyAnalysisChart.bars.showMonths = true;
|
|
}
|
|
else if (e.classed('toggle2')) {
|
|
BuoyAnalysisChart.bars.showYears = false;
|
|
BuoyAnalysisChart.bars.showMonths = true;
|
|
}
|
|
else if (e.classed('toggle3')) {
|
|
BuoyAnalysisChart.bars.showYears = true;
|
|
BuoyAnalysisChart.bars.showMonths = false;
|
|
}
|
|
|
|
BuoyAnalysisChart.draw();
|
|
},
|
|
|
|
/**
|
|
*
|
|
*/
|
|
columnDisplayClick: function(d) {
|
|
var e = d3.select(this);
|
|
|
|
d3.selectAll('.column-display .toggle').classed('selected', false);
|
|
|
|
e.classed('selected', true);
|
|
|
|
if (e.classed('toggle1')) {
|
|
BuoyAnalysisData.property = 'at';
|
|
}
|
|
else if (e.classed('toggle2')) {
|
|
BuoyAnalysisData.property = 'wt';
|
|
}
|
|
else if (e.classed('toggle3')) {
|
|
BuoyAnalysisData.property = 'wh';
|
|
}
|
|
else if (e.classed('toggle4')) {
|
|
BuoyAnalysisData.property = 'wp';
|
|
}
|
|
else if (e.classed('toggle5')) {
|
|
BuoyAnalysisData.property = 'ws';
|
|
}
|
|
|
|
BuoyAnalysisChart.updateAxes();
|
|
BuoyAnalysisChart.draw();
|
|
BuoyAnalysisChart3.draw();
|
|
},
|
|
|
|
/**
|
|
*
|
|
*/
|
|
attachBehaviors: function() {
|
|
d3.select('#map')
|
|
.on('click', BuoyAnalysisBehaviors.reticleClick);
|
|
|
|
d3.select('.reticle')
|
|
.call(d3.behavior.drag().on('drag', BuoyAnalysisBehaviors.reticleDrag));
|
|
|
|
d3.selectAll('.bar-display .toggle')
|
|
.on('click', BuoyAnalysisBehaviors.barDisplayClick);
|
|
|
|
d3.selectAll('.column-display .toggle')
|
|
.on('click', BuoyAnalysisBehaviors.columnDisplayClick);
|
|
|
|
d3.select(".reticle-sizer").on("input", BuoyAnalysisBehaviors.reticleResize);
|
|
}
|
|
};
|
|
|