js折线图设置y轴刻度_D3.js实现折线图的方法详解

前言

D3.js是一个帮助开发者操纵基于数据的文档的JavaScript类库，在《D3.js实现柱状图的方法详解》中已经给大家介绍过如何用D3.js来实现一个简单的柱状图了，今天我们来学习用D3.js来实现折线图，感兴趣的朋友们下面来一起看看吧。

折线图由坐标轴、线条和点组成。和实现柱状图一样，我们还是先把大概的画图框架搭起来，代码如下(别忘了添加D3.js)：

折线图

.container {

margin: 30px auto;

width: 600px;

height: 300px;

border: 1px solid #000;

}

window.onload = function() {

var width = 600, height = 300;

// SVG画布边缘与图表内容的距离

var padding = { top: 50, right: 50, bottom: 50, left: 50 };

// 创建一个分组用来组合要画的图表元素

var main = d3.select('.container svg').append('g')

// 给这个分组加上main类

.classed('main')

// 设置该分组的transform属性

.attr('transform', "translate(" + padding.top + ',' + padding.left + ')');

};

坐标轴的实现

要创建