d3.js 折れ線グラフをアニメーションで動かしたい

前提・実現したいこと

d3.jsで折れ線グラフは作れますが、アニメーションするやり方が分からないので知りたいです。

カラー表示されている折れ線部分を時間の経過とともに徐々に進んでいくようなアニメーションを作りたいです。

発生している問題・エラーメッセージ

特になし

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <title>d3.js v5 Simple Liner Graph</title>
6  <style></style>
7</head>
8<body>
9  <script src="https://d3js.org/d3.v4.min.js"></script>
10  <div id="my_dataviz"></div>
11  <script src="test.js"> </script>
12</body>
13</html>

js
1// set the dimensions and margins of the graph
2var margin = {top: 10, right: 30, bottom: 30, left: 60},
3    width = 460 - margin.left - margin.right,
4    height = 400 - margin.top - margin.bottom;
5
6// append the svg object to the body of the page
7var svg = d3.select("#my_dataviz")
8  .append("svg")
9    .attr("width", width + margin.left + margin.right)
10    .attr("height", height + margin.top + margin.bottom)
11  .append("g")
12    .attr("transform",
13          "translate(" + margin.left + "," + margin.top + ")");
14
15//Read the data
16d3.csv("https://raw.githubusercontent.com/holtzy/data_to_viz/master/Example_dataset/5_OneCatSevNumOrdered.csv", function(data) {
17
18  // group the data: I want to draw one line per group
19  var sumstat = d3.nest() // nest function allows to group the calculation per level of a factor
20    .key(function(d) { return d.name;})
21    .entries(data);
22
23  // Add X axis --> it is a date format
24  var x = d3.scaleLinear()
25    .domain(d3.extent(data, function(d) { return d.year; }))
26    .range([ 0, width ]);
27  svg.append("g")
28    .attr("transform", "translate(0," + height + ")")
29    .call(d3.axisBottom(x).ticks(5));
30
31  // Add Y axis
32  var y = d3.scaleLinear()
33    .domain([0, d3.max(data, function(d) { return +d.n; })])
34    .range([ height, 0 ]);
35  svg.append("g")
36    .call(d3.axisLeft(y));
37
38  // color palette
39  var res = sumstat.map(function(d){ return d.key }) // list of group names
40  var color = d3.scaleOrdinal()
41    .domain(res)
42    .range(['#e41a1c','#377eb8','#4daf4a','#984ea3','#ff7f00','#ffff33','#a65628','#f781bf','#999999'])
43
44  // Draw the line
45  svg.selectAll(".line")
46      .data(sumstat)
47      .enter()
48      .append("path")
49        .attr("fill", "none")
50        .attr("stroke", function(d){ return color(d.key) })
51        .attr("stroke-width", 1.5)
52        .attr("d", function(d){
53          return d3.line()
54            .x(function(d) { return x(d.year); })
55            .y(function(d) { return y(+d.n); })
56            (d.values)
57        })
58
59})
60
61