xxxxxxxxxx<html><head> <meta charset="utf-8"> <title>Translate and Rotate</title> <script src="https://d3js.org/d3.v3.min.js"></script> <link rel="stylesheet" type="text/css" href="translate_and_rotate.css"></head><body><div id="legend"><p> Click on the background to activate</p><p> Duration: <input class="box" type="text" id="ms" value="3.0" /> seconds.</p></div><svg width="960" height="500"> <defs> <g id="shape" transform="rotate(0)"> <rect x="-50" y="-50" width="100" height="100" /> <circle r="4" fill="none" /> </g> </defs> <rect id="background" width="960" height="500" /> <path id="track" d="M 50 200 h 850" /> <g id="g0"> <g id="g1"> <use xlink:href="#shape" /> </g> </g></svg><script type="text/javascript">var roll = function() { var text_entered = document.getElementById('ms').value * 1000; text_entered ? t = text_entered : t = 3.0; var d = 500, e = "linear" d3.select("#g1") .attr("transform", "translate(100 200)") .transition() .delay(d) .duration(t) .ease(e) .attr("transform", "translate(850 200)"); d3.select("#shape") .attr("transform", "rotate(0)") .transition() .delay(d) .duration(t) .ease(e) .attr("transform", "rotate(180)"); return;}d3.select("#background") .on("click", function() { return roll(); } );roll();</script></body></html> Modified http://d3js.org/d3.v3.min.js to a secure url
https://d3js.org/d3.v3.min.js