本来一直是使用echarts来画图的,结果画好了以后,公司又要使用d3来画,没有对它进行特别的深入,只是了解了一下,能完成需求.
还有就是虽然有d3的官网可以学习,但是我不翻墙的话网站基本上是没办法进去的 ,为了以后可以方便的使用d3的一些东西,我觉得自己有必要把它写下来.
先看效果图
image.png
是不是感觉和echarts画出来的一毛一样,我也这么觉得......下次再研究两者有啥区别吧.
代码直接贴过来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#container{
background-color: #ddd;
width: 500px;
height: 350px;
}
path{
fill: none;
stroke: #4682B4;
stroke-width: 2 ;
}
.domain,.tick line{
stroke: gray;
stroke-width: 1;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="d3.js"></script>
<script>
var width = 500,
height = 300,
margin = {left:50,top:30,right:20,bottom:20},
g_width = width-margin.left-margin.right,
g_height = height-margin.top-margin.bottom;
var svg = d3.select("#container")
.append("svg")
.attr("width",width)
.attr("height",height)
var g = d3.select("svg")
.append("g")
.attr("transform","translate("+margin.left+","+margin.top+")")
var dataset = [
{x: 0, y: 11}, {x: 1, y: 35},
{x: 2, y: 23}, {x: 3, y: 78},
{x: 4, y: 55}, {x: 5, y: 18},
{x: 6, y: 98}, {x: 7, y: 100},
{x: 8, y: 22}, {x: 9, y: 65}
];
var scale_x = d3.scale.linear()
.domain(d3.extent(dataset, function(d) {
return d.x;
}))
.range([0,g_width])
var scale_y = d3.scale.linear()
.domain([0, d3.max(dataset,function(d) {
return d.y;
})])
.range([g_height,0])
var x_axis = d3.svg.axis().scale(scale_x),
y_axis = d3.svg.axis().scale(scale_y).orient("left");
g.append("g")
.call(x_axis)
.attr("transform","translate(0,"+g_height+")")
g.append("g")
.call(y_axis)
.append("text")
.text("Price($)")
.attr("transform","rotate(-90)")
.attr("text-anchor","end")
.attr("dy","1em")
//绘制曲线
var line_generator = d3.svg.line()
.x(function(d){
return scale_x(d.x);
})
.y(function(d){
return scale_y(d.y);
})
.interpolate("cardinal");
d3.select("g")
.append("path")
.attr("d",line_generator(dataset))
</script>
</body>
上面的代码同样html css js三部分
HTML部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
css代码
</head>
<body>
<div id="container"></div>
<script src="d3.js"></script>
<script>
js代码
</script>
</body>
css部分
<style>
#container{
background-color: #ddd;
width: 500px;
height: 350px;
}
path{
fill: none;//可以对曲线进行填充色
stroke: #4682B4;/*曲线的颜色*/
stroke-width: 2 ;/*曲线的宽度*/
}
.domain,.tick line{/*刻度尺的样式*/
stroke: gray;
stroke-width: 1;
}
</style>
path 是对曲线进行的一系列样式设置
JS部分
- 0 模拟数据
var dataset = [
{x: 0, y: 11}, {x: 1, y: 35},
{x: 2, y: 23}, {x: 3, y: 78},
{x: 4, y: 55}, {x: 5, y: 18},
{x: 6, y: 98}, {x: 7, y: 100},
{x: 8, y: 22}, {x: 9, y: 65}
];
- 1 设置图表大小:首先要设置画布的大小,然后用margin来存储图表的边距信息,计算出图表的宽度和高度
var width = 500,
height = 300,
// SVG画布边缘与图表内容的距离
margin = {left:50,top:30,right:20,bottom:20},
g_width = width-margin.left-margin.right,
g_height = height-margin.top-margin.bottom;
- 2 添加画布
//svg // 创建一个分组用来组合要画的图表元素
var svg = d3.select("#container")
.append("svg")
//属性：宽、高
.attr("width",width)
.attr("height",height)
//g元素
var g = d3.select("svg")
.append("g")
// // 设置该分组的transform属性
.attr("transform","translate("+margin.left+","+margin.top+")")
d3.select("#container")选择container元素.往这个里面添加一个子元素"svg".,给这个svg设定一些属性，再往“svg”中添加一个”g”元素并设定一些属性。
- 3 设置横轴方向和纵轴方向的区域（Domains）和范围（Ranges）
画布添加好了 可是我要怎么画呢 ?首先要确定定义域和值域
//设置比例缩放
//创建x轴的比例尺(线性比例尺)
var scale_x = d3.scale.linear()//创建了线性比例尺
.domain(d3.extent(dataset, function(d) {//定义定义域
return d.x;
}))
.range([0,g_width])//定义值域
// 创建y轴的比例尺(线性比例尺)
var scale_y = d3.scale.linear()
.domain([0, d3.max(dataset,function(d) {//定义定义域
return d.y;
})])
.range([g_height,0])//定义值域
这段代码是为了让我们导入的数据与图表的大小相适应，range知道是图表范围的大小，他是一个尺寸大小。这段代码告诉D3我们要画些东西在x轴上，这些东西是时间/日期的一个实体。
而domain指的是数据的区域，extent返回的是最小的x或y到最大的x或y这样一个跨度，所以，最小的x或y就对应于上面range的最小值0
对于y轴的值域,g_height 表示的是当数据为最大值即“8”的时候，输出最高点为g_height。这里要注意由于浏览器从左到右、从上到下的坐标系数值是逐渐增到，因此我们将range的值设成[g_height，0]即可实现整一个的翻转
//，因为SVG画布的y轴与传统认知上的y轴的方向是反着来的，所以在定义y轴的定义域和值域对应关系时，也需要反着来
- 4 设置x,y坐标轴
设置好坐标比例问题,就要开始创建坐标轴,添加坐标轴函数:axis()
//创建x轴 添加坐标轴函数：axis（）
var x_axis = d3.svg.axis().scale(scale_x),
// 创建y轴
y_axis = d3.svg.axis().scale(scale_y).orient("left").ticks(5);;
坐标轴axis初始化方法通过d3.svg.axis()来调用，然后调用.scale(scale_x)用前面定义的scale_x来给坐标轴设定刻度， .orient()设定刻度相对坐标轴的位置，.ticks()告诉D3在坐标轴上设定差不多几个刻度就够了，比方说你要D3给你的Y轴设定大概20个刻度 y_axis = d3.svg.axis().scale(scale_y).orient("left").ticks(20);
image.png
- 5 添加x,y坐标轴
既然比例设置好了,坐标轴也设置好了,画布也添加完成了,那么就先把坐标轴画出来
//依次添加X、Y坐标轴,并通过偏移量的设置使得X坐标轴往下移
// 添加SVG元素并与x轴进行“绑定”
g.append("g")
.call(x_axis)
.attr("transform","translate(0,"+g_height+")")
// 添加SVG元素并与y轴进行“绑定”
g.append("g")
.call(y_axis)
.append("text")
.text("Price($)")
.attr("transform","rotate(-90)")
.attr("text-anchor","end")
.attr("dy","1em")
- 6 绘制曲线
什么都准备好了,就可以绘制曲线了
//绘制曲线
var line_generator = d3.svg.line()
.x(function(d){
return scale_x(d.x);
})
.y(function(d){
return scale_y(d.y);
})
// 选择线条的类型
.interpolate("cardinal");
// 添加path元素，并通过line_generator()计算出值来赋值
d3.select("g")
.append("path")
.attr("d",line_generator(dataset))
这样,一个曲线图就完成啦 !!
如果想在曲线上添加点的话,就加入下面的代码
d3.select("g").selectAll('circle')
.data(dataset)
.enter()
.append('circle')
.attr('cx', function(d) {
return scale_x(d.x);
})
.attr('cy', function(d) {
return scale_y(d.y);
})
.attr('r', 3)
.attr('fill', function(d) {
return "white";
});
这样画出来的曲线图就有点啦
image.png
有曲线图当然也有面积图 ,如果你想绘制面积图表,注意需要三个参数,y0将原来的线型图变成了封闭的面积图咯 将上述步骤6中绘制曲线的代码直接换成一下代码就可以实现了
var myArea = d3.svg.area()
.x(function (d) {
return scale_x(d.x)
})
.y0(g_height)
.y1(function(d){
return scale_y(d.y)
})
.interpolate("cardinal")
d3.select("g")
.append("path")
.attr("d",myArea(dataset))
.style("fill","pink")
image.png
完成了这些基本上就可以应付一些简单的d3画图啦
官网:http://www.w3.org
不过我老是访问不了 汗(⊙﹏⊙)b!!!
