D3学习笔记

最新推荐文章于 2019-10-03 08:50:34 发布

川衡

最新推荐文章于 2019-10-03 08:50:34 发布

阅读量396

点赞数 1

文章标签： d3.js

本文链接：https://blog.csdn.net/yanchuan1990/article/details/44494539

版权

<!DOCTYPE html>
<meta charset="utf-8">
<style>
.axis path, .axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
</style>
<body>
<script src="js/d3.min.js"></script>
<script>
// 定义数据
var data = [130,45,355,450,195,400];
//1、页面插入一个svg
var svg = d3.select('body')
.append('svg')
.attr({
width:500,
height:500
})
.append('g'); //在svg元素内添加g元素
//2、定义一个图形这里用柱形图举例
var rect = svg.selectAll('rect').data(data).enter().append('rect')
.attr({
x:function(d,i){return (500/data.length)*i+10;},//设置图的x
y:function(d){return 480-d;}, //480=500-20
width:30,//图宽
height:function(d,i){return d},//图高
fill:function(d){
if(d>=400){
return 'yellow';
}
if(d<=300){
return 'red';
}
if(d>300 && d<400){
return 'green'
}
}//填充颜色设置
})

//3、添加轴坐标用到domain range 定义域值域
var x = d3.scale.linear().domain([0,10]).range([5,490]);
var y = d3.scale.linear().domain([0,d3.max(data,function(d){return d;})]).range([500,5]);
//3.1 引入x y设置轴位置
var xAxis = d3.svg.axis().scale(x).orient('bottom');
var yAxis = d3.svg.axis().scale(y).orient('left');
//3.2 把轴加入到已定义好的svg 中
svg.append('g').attr('class','x axis').attr("transform", "translate(0,480)").call(xAxis);
svg.append('g').attr('class','y axis').attr("transform", "translate(250,0)").call(yAxis);
</script>