xxxxxxxxxx
<meta charset="utf-8">
<style>
svg {
background-color: steelblue;
}
circle {
fill: tomato;
}
.line {
stroke: tomato;
}
</style>
<body>
<input type="range" min=0 max=400 oninput="draw(this.value)">
</body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>
var width = 500,
height = 500;
var line = d3.svg.line();
var svg = d3.select('body').append('svg')
.attr('width', width)
.attr('height', height);
var path = svg.append('path');
draw = function(offset) {
console.log(offset);
var points = [[50, 250], [50 + parseInt(offset), 250]];
var circleSelection = svg.selectAll('circle')
.data(points);
var newCircles = circleSelection.enter().append('circle')
.attr('r', 15);
circleSelection
.transition()
.ease('linear')
.attr('cx', function(d) { return d[0]; })
.attr('cy', function(d) { return d[1]; });
path.datum(points)
.transition()
.ease('linear')
.attr('d', line)
.attr('class', 'line');
}
draw(150);
</script>
Modified http://d3js.org/d3.v3.min.js to a secure url
https://d3js.org/d3.v3.min.js