Placement of .transition for lines in d3? - d3.js

Question

I'm looking to get a transition animation into my line graph, but I'm not really sure where the .transition() would go. I tried to put it in where I thought it should go, but that just froze the graph. Here's my code:
var vis = d3.select('#visual'),
WIDTH = 1000,
HEIGHT = 500,
MARGINS = {
top: 20,
right: 20,
bottom: 20,
left: 50
},
xRange = d3.scale.linear().range([MARGINS.left, WIDTH - MARGINS.right]).domain([d3.min(lineData, function(d) {
return d.x;
}), d3.max(lineData, function(d) {
return d.x;
})]),
yRange = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([d3.min(lineData, function(d) {
return d.y - 1;
}), d3.max(lineData, function(d) {
return d.y;
})]),
//setup x
xAxis = d3.svg.axis()
.scale(xRange)
.tickSize(5)
.tickSubdivide(true),
//setup y
yAxis = d3.svg.axis()
.scale(yRange)
.tickSize(5)
.orient("left")
.tickSubdivide(true);
vis.append("svg:g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")")
.call(xAxis);
vis.append("svg:g")
.attr("class", "y axis")
.attr("transform", "translate(" + (MARGINS.left) + ",0)")
.call(yAxis);
var lineFunc = d3.svg.line()
.x(function(d) {
return xRange(d.x);
})
.y(function(d) {
return yRange(d.y);
});
vis.append("svg:path")
.attr("class", "myLine")
.attr("d", lineFunc(lineData))
.attr("stroke", "blue")
.attr("stroke-width", 2)
.attr("fill", "none");
// lineFunc.transition(); <--Where I thought the tag should be
// lineFunc.exit().transition()
// .remove();
And here's the whole thing if necessary: https://jsfiddle.net/hppkqfy7/

Answer 1

Transitions in D3 usually apply to attribute(s) and .transition() should be called before setting the new value of the attribute(s). This will tell D3 to interpolate between old and new.
In your case, you'd call .transition() just before setting the updated d attribute:
d3.select(".myLine")
.transition()
.attr("d", lineFunc(lineData));
Complete demo here.