Trying to understand path interpolation. Example here followed: http://bl.ocks.org/mbostock/1642989
Transition in my example above is jumpy rather than smooth like in above link.
Trying to understand path interpolation. Example here followed: http://bl.ocks.org/mbostock/1642989
Transition in my example above is jumpy rather than smooth like in above link.
<!DOCTYPE HTML> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<title>basic line example</title> | |
<script src="http://d3js.org/d3.v3.min.js"></script> | |
<style> | |
path { | |
stroke:red; | |
stroke-width:2; | |
fill:none; | |
} | |
</style> | |
</head> | |
<body> | |
<script type="text/javascript"> | |
var margin = {top: 20, right: 20, bottom: 20, left: 40}, | |
width = 1400 - margin.left - margin.right, | |
height = 500 - margin.top - margin.bottom; | |
var svg = d3.select("body").append("svg") | |
.attr("width", width + margin.left + margin.right) | |
.attr("height", height + margin.top + margin.bottom) | |
.append("g") | |
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
svg.append("defs") | |
.append("clipPath") | |
.attr("id","clip") | |
.append("rect") | |
.attr("width",width) | |
.attr("height",height); | |
var dataset = []; | |
for (var i = 0; i < 55; i++) { | |
var newNumber = Math.random(); | |
dataset.push(newNumber); | |
} | |
var xScale = d3.scale.linear().domain([0,54]).range([0,width]); | |
var yScale = d3.scale.linear().domain([0,1]).range([height,0]); | |
var line = d3.svg.line() | |
.interpolate("basis") | |
.x(function(d,i) { return xScale(i); }) | |
.y(function(d) { return yScale(d); }); | |
var path = svg.append("g") | |
.attr("clip-path","url(#clip)") | |
.append("svg:path") | |
.attr("transform","translate(" + xScale(0) + ")") | |
.attr("d", line(dataset)); | |
function animate() { | |
svg.selectAll("path") | |
.attr("transform","translate(" + xScale(1) + ")") | |
.attr("d",line(dataset)) | |
.transition() | |
.ease("linear") | |
.duration(3000) | |
.attr("transform","translate(" + xScale(0) + ")"); | |
}; | |
setInterval(function() { | |
dataset.push(Math.random()); | |
animate(); | |
dataset.shift();}, 1500) | |
</script> | |
</body> | |
</html> |