D3-Gauge_Mouse-Position
HTML
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<body onload="initialize()">
<span id="xMouseGaugeContainer"></span>
<span id="yMouseGaugeContainer"></span>
</body>
CSS
body
{
font: 10px arial;
}
JavaScript
var gauges = [];
var w = window.innerWidth;
var h = window.innerHeight;
function createGauge(name, label, min, max)
{
var config =
{
size: 80,
label: label,
min: undefined != min ? min : 0,
max: undefined != max ? max : 100,
minorTicks: 5
}
gauges[name] = new Gauge(name + "GaugeContainer", config);
gauges[name].render();
}
function createGauges()
{
createGauge("xMouse", "X - Mouse");
createGauge("yMouse", "Y - Mouse");
//createGauge("test", "Test", -50, 50 );
}
function initialize()
{
createGauges();
$( document ).on( "mousemove", function( event ) {
gauges["xMouse"].redraw(100*event.pageX/w);
gauges["yMouse"].redraw(100*event.pageY/h);
});
}
// gauge.js
function Gauge(placeholderName, configuration)
{
this.placeholderName = placeholderName;
var self = this; // for internal d3 functions
this.configure = function(configuration)
{
this.config = configuration;
this.config.size = this.config.size * 0.9;
this.config.raduis = this.config.size * 0.97 / 2;
this.config.cx = this.config.size / 2;
this.config.cy = this.config.size / 2;
this.config.min = undefined != configuration.min ? configuration.min : 0;
this.config.max = undefined != configuration.max ? configuration.max : 100;
this.config.range = this.config.max - this.config.min;
this.config.majorTicks = configuration.majorTicks || 5;
this.config.minorTicks = configuration.minorTicks || 2;
this.config.transitionDuration = configuration.transitionDuration || 500;
}
this.render = function()
{
this.body = d3.select("#" + this.placeholderName)
.append("svg:svg")
.attr("class", "gauge")
.attr("width", this.config.size)
.attr("height", this.config.size);
this.body.append("svg:circle")
.attr("cx",...