<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="chart">
<svg width="500" height="400"></svg>
</div>
<script src="d3.js"></script>
<script>
var svg = d3.select('svg');
var data = [120,130,70,80,210,110];
var areaPath = d3.area()
.x(function(value,index){
return 50 + index*50;
})
.y0(300)
.y1(function(value){
return value;
});
areaPath.curve(d3.curveStep)
svg.append('path')
.attr('d',areaPath(data))
.attr('stroke','#000')
.attr('stroke-width',1)
.attr('fill','red')
</script>
</body>
</html>