Needed a simple solution to move a legend back and forth. This example shows the logic and uses javascripts offsetLeft to move the item (li in this case)
xxxxxxxxxx
<html lang="en">
<head>
<meta charset="utf-8">
<title>d3 | slider</title>
<meta name="author" content="Sundar Singh | eesur.com">
<link rel="stylesheet" href="main.css">
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<style>
</style>
</head>
<body>
<header>
<button id="legendPrev">Prev</button>
<button id="legendNext">Next</button>
</header>
<section id="container"></section>
<script src="d3_code_slider.js" charset="utf-8"></script>
</body>
</html>
Modified http://d3js.org/d3.v3.min.js to a secure url
https://d3js.org/d3.v3.min.js