用svg绘折线图

最新推荐文章于 2024-04-19 10:15:00 发布

weixin_30596165

最新推荐文章于 2024-04-19 10:15:00 发布

阅读量412

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/helloNina/articles/5024000.html

<!DOCTYPE html>
<html>
<head>
<title>3d实现折线图的实例</title>
<meta charset="utf-8">
<style>
#container{
background-color: #ddd;
width: 500px;
height: 250px;
}
path{
fill: none;
stroke-width: 2;
stroke: #4682b4;
}
/*查看元素发现x轴为path元素的class为domain 刻度的class是tick 将他们的样式设置为和曲线不同的样式*/
.domain,.tick line{
stroke:gray;
stroke-width:1;
}

</style>
</head>
<body>
<div id="container"></div>
//步骤1：首先在body中创建一个div为container的容器，此容器中放置svg元素，在svg中再用g(group)标签分类
//a:select选取元素 append添加元素 attr设置属性 g(group) transform设置偏移量
<script src="js/d3.v3.min.js"></script>
<script>
//f:优化：给svg不要直接设置width和height 还有margin
var width= 500,
height= 250,
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",500).attr("height",250);
.attr("widht",width).attr("height",height);

//b:给svg元素添加g元素让其有（50,30）的偏移量就是<g transform="translate(50,30)"></g>
var g= d3.select("svg").append("g")
//.attr("transform","translate(50,30)");
.attr("transform","translate("+margin.left+","+margin.top+")");

//e:data数据
var data=[1,3,5,7,8,4,3,7];

//g:.scale定义缩放线性的linera()
var scale_x=d3.scale.linear()
.domain([0,data.length])//输入的范围从data数据中下标为0开始到length-1结束 [0,data.length-1]
.range([0,g_width]);//输出的范围
var scale_y=d3.scale.linear()
.domain([0,d3.max(data)])
.range([g_height,0]);//由于y轴上的坐标是上大下小而浏览器的坐标是与此相反的调一下ok！

//e:data数据
//var data=[1,3,5,7,8,4,3,7];
//d:path元素的d属性的值line_generator函数
/*x和y分别代表xy坐标值此时需要一组数据data*/
var line_generator=d3.svg.line()
.x(function(d,i){return scale_x(i);})//0,1,2,3,...
.y(function(d){return scale_y(d);})//1,3,5,7...
.interpolate("cardinal");//让折线光滑的

//console.log(line_generator);

//c:在g元素中有path元素绘制曲线 <path d="M1,0L10,40L40,50L100,100L0,200"></path>
g.append("path").attr("d",line_generator(data));
//通过上面的path已经生产了折线图但是有默认的填充样式不好看！回style中调节path元素的样式
//h: 坐标系绘制用scale方法缩放
var x_axis=d3.svg.axis().scale(scale_x),
y_axis=d3.svg.axis().scale(scale_y).orient("left");//orient("left")在左侧显示
//x轴上的坐标
g.append("g")
.call(x_axis)
.attr("transform","translate(0,"+g_height+")");
//y轴上的坐标
g.append("g")
.call(y_axis)
.append("text")//给y轴添加文字
.text("$Price($)")
.attr("transform","rotate(-90)")//让文字顺着y轴放置
.attr("text-anchor","end")//让文字的末尾与坐标对齐
.attr("dy","-1.5em")//让文字距离y轴有点距离
;