Skip to content

Instantly share code, notes, and snippets.

@raghothams
Last active August 29, 2015 14:14
Show Gist options
  • Save raghothams/ac68b37c9d978c83dcec to your computer and use it in GitHub Desktop.
Save raghothams/ac68b37c9d978c83dcec to your computer and use it in GitHub Desktop.
D3 tween motion on path / link
<!DOCTYPE html>
<html>
<head>
<script src="http://d3js.org/d3.v3.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<script id="jsbin-javascript">
var coords = [
{'x': 10, 'y': 10},
{'x': 100, 'y': 100}
];
var lineFunction = d3.svg.line()
.x(function(d){ return d.x;})
.y(function(d){ return d.y;})
.interpolate('linear');
var svg = d3.select('body')
.append("svg")
.attr("width", 200)
.attr("height", 200);
var route = svg.append("path")
.attr("d", lineFunction(coords))
.attr("stroke", "blue")
.attr("stroke-width", 2)
.attr("fill", "none");
var circle = svg.append("circle")
.attr("cx", 30)
.attr("cy", 30)
.attr("r", 20);
function delta(path) {
var l = path.getTotalLength();
return function(i) {
return function(t) {
var p = path.getPointAtLength(t * l);
return "translate(" + p.x + "," + p.y + ")";
};
};
}
function transition(plane, route) {
var l = route.node().getTotalLength();
plane.transition()
.duration(5000)
.attrTween("transform", delta(route.node()));
}
transition(circle, route);
/*
function transition(plane, route) {
var l = route.node().getTotalLength();
plane.transition()
.duration(5000)
.attrTween("transform", delta(route.node()));
}
function delta(path) {
var l = path.getTotalLength();
return function(i) {
return function(t) {
var p = path.getPointAtLength(t * l);
return "translate(" + p.x + "," + p.y + ")";
}
}
}
*/
</script>
<script id="jsbin-source-javascript" type="text/javascript">var coords = [
{'x': 10, 'y': 10},
{'x': 100, 'y': 100}
];
var lineFunction = d3.svg.line()
.x(function(d){ return d.x;})
.y(function(d){ return d.y;})
.interpolate('linear');
var svg = d3.select('body')
.append("svg")
.attr("width", 200)
.attr("height", 200);
var route = svg.append("path")
.attr("d", lineFunction(coords))
.attr("stroke", "blue")
.attr("stroke-width", 2)
.attr("fill", "none");
var circle = svg.append("circle")
.attr("cx", 30)
.attr("cy", 30)
.attr("r", 20);
function delta(path) {
var l = path.getTotalLength();
return function(i) {
return function(t) {
var p = path.getPointAtLength(t * l);
return "translate(" + p.x + "," + p.y + ")";
};
};
}
function transition(plane, route) {
var l = route.node().getTotalLength();
plane.transition()
.duration(5000)
.attrTween("transform", delta(route.node()));
}
transition(circle, route);
/*
function transition(plane, route) {
var l = route.node().getTotalLength();
plane.transition()
.duration(5000)
.attrTween("transform", delta(route.node()));
}
function delta(path) {
var l = path.getTotalLength();
return function(i) {
return function(t) {
var p = path.getPointAtLength(t * l);
return "translate(" + p.x + "," + p.y + ")";
}
}
}
*/</script></body>
</html>
// http://www.tnoda.com/blog/2014-04-02
var coords = [
{'x': 10, 'y': 10},
{'x': 100, 'y': 100}
];
var lineFunction = d3.svg.line()
.x(function(d){ return d.x;})
.y(function(d){ return d.y;})
.interpolate('linear');
var svg = d3.select('body')
.append("svg")
.attr("width", 200)
.attr("height", 200);
var route = svg.append("path")
.attr("d", lineFunction(coords))
.attr("stroke", "blue")
.attr("stroke-width", 2)
.attr("fill", "none");
var circle = svg.append("circle")
.attr("cx", 30)
.attr("cy", 30)
.attr("r", 20);
function delta(path) {
var l = path.getTotalLength();
return function(i) {
return function(t) {
var p = path.getPointAtLength(t * l);
return "translate(" + p.x + "," + p.y + ")";
};
};
}
function transition(plane, route) {
var l = route.node().getTotalLength();
plane.transition()
.duration(5000)
.attrTween("transform", delta(route.node()));
}
transition(circle, route);
/*
function transition(plane, route) {
var l = route.node().getTotalLength();
plane.transition()
.duration(5000)
.attrTween("transform", delta(route.node()));
}
function delta(path) {
var l = path.getTotalLength();
return function(i) {
return function(t) {
var p = path.getPointAtLength(t * l);
return "translate(" + p.x + "," + p.y + ")";
}
}
}
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment