I'm using the following code to plot a line on a bar chart:
data.forEach(function(elem, index) {
svg.append("path")
.datum(elem)
.attr("class", "line")
.style("color", colors[index])
.attr("d", line);
});
Where data is a multidimensional array, each of whose elements is another array of the form [{x: 0, y: whatever}, {x: 0.5, y: another-y-value}, ...], i.e. a set of points for the line to go through. What I want to do is to make the line appear as if it is being drawn, i.e. instead of making it appear instantly, I want it to visibly extend from the first point through the second, and so on, while retaining its curvature. This is what it currently looks like (for an arbitrary function mapping x to y):
