@patricksurry/g3
Version:
A flexible Javascript framework for building steam gauge instrument panels that display live external metrics from flight (or other) simulators like XPlane or MS FS2020
38 lines (29 loc) • 951 B
HTML
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/d3-dispatch@3"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-selection@3"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-drag@3"></script>
</head>
<body>
<svg width="1024" height="800">
<g transform="translate(512, 500)">
<g id="dial">
<circle id="dial" r="100" style="fill: green"/>
<circle r="10" cy="-80" style="fill: #333"/>
</g>
</g>
</svg>
<script>
const handler = d3.drag(), RAD2DEG = 180 / Math.PI;
var angle = 0;
function dragRotation(e) {
let alpha0 = RAD2DEG * Math.atan2(e.subject.y, e.subject.x),
alpha1 = RAD2DEG * Math.atan2(e.y, e.x),
alpha2 = RAD2DEG * Math.atan2(e.y + e.dy, e.x + e.dx);
console.log(alpha0, alpha1, alpha2);
d3.select('#dial').attr('transform', 'rotate(' + (alpha2 - alpha0) +')');
}
d3.select("#dial").call(d3.drag().on("drag", dragRotation));
</script>
</body>
</html>