D3 Examples - Slider for Rotation

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>Slider for Rotation</title>
    <link type="text/css" href="slider.css" rel="stylesheet" />
    <script src="https://d3js.org/d3.v3.min.js"></script>
</head>
<body>
<div id="degrees">0.00°</div>
<svg width="960" height="500">
        <defs>
            <radialGradient id="rg" fx="30%">
            <stop offset="0%" stop-color="#ccc" />
            <stop offset="50%" stop-color="#777" />
            <stop offset="100%" stop-color="#222" />
            </radialGradient>
​
            <linearGradient id="lg"
                x1="0%" y1="0%" x2="0%" y2="100%">
                    <stop offset="0%"  stop-color="gray"/>
                    <stop offset="30%" stop-color="white"/>
                    <stop offset="95%" stop-color="#111"/>
            </linearGradient>
​
            <linearGradient id="lgh"
                x1="0%" y1="0%" x2="100%" y2="0%">
                    <stop offset="0%"  stop-color="white"/>
                    <stop offset="50%" stop-color="gray"/>
                    <stop offset="100%" stop-color="white"/>
            </linearGradient>
        </defs>
</svg>
​
<script>
var svg = d3.select("svg");
​
var drag = d3.behavior.drag()
    .origin(Object)
    .on("drag",
    function (d) {
        var angle = d.y / 10;
        d3.select("#degrees")
            .text(angle.toFixed(2) + "°")
            .style("top", 103 + d.y + "px")
        
        d3.select("#lever") .attr("transform",
            "rotate(" + (-angle) + ")");
        d3.select(this)
            .attr("cy", d.y =
            Math.max(0, Math.min(300, d3.event.y)) );
    }
);
​
var g0 = svg.append("g"); 
​
​
var g1 = svg.append("g")
    .attr("transform", "translate(30 100)");
​
var track = g1.append("rect") .attr("id", "track")
    .attr("x", 2)
    .attr("rx", 7)
    .attr("y", -25)
    .attr("width", 32)
    .attr("height", 350);
    
var slot = g1.append("rect") .attr("id", "slot")
    .attr("x", 13)
    .attr("rx", 5)
    .attr("y", -10)
    .attr("width", 10)
    .attr("height", 320);
    
var knob = g1.append("circle").attr("id", "knob")
    .data([{x: 18, y:0}])
    .attr("r", 10)
    .attr("cx", function(d) { return d.x; })
    .attr("cy", function(d) {return d.y; })
    .call(drag);
​
var g2 = g0.append("g")
    .attr("transform", "translate(0 150)");
​
var balance = 180;
​
var g3 = g2.append("g")
    .attr("transform", "translate(400 100)");
    
var barrel  = g3.append("circle") .attr("id", "barrel")
    .attr("r", balance);
    
var centre  = g3.append("circle") .attr("id", "centre")
    .attr("r", 9);
    
var lever = g3.append("rect").attr("id", "lever")
    .attr("x", -balance)
    .attr("y", -5)
    .attr("ry", balance)
    .attr("width", 580)
    .attr("height", 10)
    .attr("transform", "rotate(0)")
    
var y_scale = d3.scale.ordinal()
    .domain([0,1,2,3,4,5,6,7,8,9,10,11,12])
    .rangePoints([50, 350]);
​
var y_axis = d3.svg.axis()
    .scale(y_scale)
    .orient("left")
    .tickValues(y_scale.domain().filter(function(d, i) { return !(i % 1); }))
​
var ruler = g0.append("g")
    .attr("transform", "translate(36 50)")
    .attr("class", "y_axis")
    .call(y_axis);
    
</script>
</body>
</html>
​
    